Question 44041 in Html Question posted in
Some basic documentation can be found here.

Grid Flow is always dense even when omitted? – Html

According to MDN, if grid-auto-flow is not specified or only specified to be row or column and dense is omitted.. it should be set to sparse and the DOM should be respected and gaps earlier than the first element that could be filled will not be filled.

My code appears to default to dense. How could I force it to act sparse?

I also tried setting the auto flow to row or column instead of not setting it at all but that didn’t work either.

.container {
  height: 400px;
  width: 400px;
  margin: 0 auto;
  background-color: black;
  display: grid;
  grid-template: repeat(4, 1fr) / repeat(4, 1fr);
  grid-auto-flow: row;
}

.first {
  grid-column: 3;
  grid-row: 1/2;
}
<div class="container">
  <div class="box first" style="background-color: #E53935">FIRST</div>
  <div class="box second" style="background-color: #D81B60">SECOND</div>
  <div class="box" style="background-color: #8E24AA">THIRD</div>
  <div class="box" style="background-color: #5E35B1">FOURTH</div>
  <!--         <div class="box" style="background-color: #3949AB">FIFTH</div>
        <div class="box" style="background-color: #1E88E5">SIXTH</div>
        <div class="box" style="background-color: #00ACC1">SEVENTH</div>
        <div class="box" style="background-color: #00897B">EIGHTH</div> -->
</div>

Codepen

Below you can find the desired result of the code above. I have hardcoded the individual box placements inside the grid, how could this be achieved by only setting the first box like in the snippet above.

While hardcoding i have discovered that the sparse property only gets ignored on the first box IF grid-row is set. If grid-row is not set at all the grid behaves sparse, otherwise dense. Also if you place the second box after the first one in grid-column: 4/5; and dont set grid-row, the following boxes do not act dense. Further proving this. Please feel free to try for yourself

.container {
  height: 400px;
  width: 400px;
  margin: 0 auto;
  background-color: black;
  display: grid;
  grid-template: repeat(4, 1fr) / repeat(4, 1fr);
  grid-auto-flow: row;
}

.first {
  grid-column: 3;
}
<div class="container">
  <div class="box first" style="background-color: #E53935">FIRST</div>
  <div class="box second" style="background-color: #D81B60">SECOND</div>
  <div class="box third" style="background-color: #8E24AA">THIRD</div>
  <div class="box" style="background-color: #5E35B1">FOURTH</div>
  <!--         <div class="box" style="background-color: #3949AB">FIFTH</div>
        <div class="box" style="background-color: #1E88E5">SIXTH</div>
        <div class="box" style="background-color: #00ACC1">SEVENTH</div>
        <div class="box" style="background-color: #00897B">EIGHTH</div> -->
</div>

Codepen

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    While hardcoding i have discovered that the sparse property only gets ignored on the first box IF grid-row is set. If grid-row is not set at all the grid behaves sparse, otherwise dense. Also if you place the second box after the first one in grid-column: 4/5; and dont set grid-row, the following boxes do not act dense. Further proving this. Please feel free to try for yourself


  2. 0

    The grid is behaving as intended, so let’s break down what’s happening

    This declaration actually does nothing, as row is the initial value for grid-auto-flow out of the box:

    grid-auto-flow: row;

    So we’re placing items on our grid in rows, with a "sparse" algorithm:

    If the dense keyword is omitted, a "sparse" algorithm is used, where the placement algorithm only ever moves "forward" in the grid when placing items, never backtracking to fill holes. This ensures that all of the auto-placed items appear "in order", even if this leaves holes that could have been filled by later items. – MDN

    So you’re thinking that the sparse algorithm should give each box a fresh row, which makes sense – it’s called "sparse" and you’ve made four rows.

    How it works is that sparse doesn’t backtrack to fill previous free spaces, it just goes forwards. This is entirely different to looking forward to see if there’s lots of free space.

    What your grid here will do is place the boxes along in a row because they all fit, and dense/sparse will not matter at all because we’ve already placed all of our boxes on the first row.

    If you want the boxes to get a row each then the column grid flow might work for you:

    .container {
  height: 400px;
  width: 400px;
  margin: 0 auto;
  background-color: black;
  display: grid;
  grid-template: repeat(4, 1fr) / repeat(4, 1fr);
  grid-auto-flow: column;
}
    <div class="container">
  <div class="box" style="background-color: #E53935">FIRST</div>
  <div class="box" style="background-color: #D81B60">SECOND</div>
  <div class="box" style="background-color: #8E24AA">THIRD</div>
  <div class="box" style="background-color: #5E35B1">FOURTH</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search