CODEWITHSUNDEEP
csscss-grid
Ashley Brandon
Ashley Brandon

Reputation: 45

Define a new row in css grid

Is there a way in css grid of saying 'after the second column, start another row'?

It seems straightforward enough defining how much height and width you want a grid cell to take up, but defining where you want cells to appear requires a lot of syntax - I feel like I'm missing something.

Like this layout:

main {
  display: grid;
  grid-gap: 10px;
  max-width: 700px;
  margin: 0 auto;
}

.block {
  height: 200px;
}

.block--one {
  background: coral;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}

.block--two {
  background: cornflowerblue;
  grid-column-start: 2;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 2;
}

.block--three {
  background: burlywood;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 4;
}

.block--four {
  background: lightseagreen;
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 4;
}
<main>
  <div class="block block--one"></div>
  <div class="block block--two"></div>
  <div class="block block--three"></div>
  <div class="block block--four"></div>
</main>

Shouldn't it be achievable with something like this?

main {
  display: grid;
  grid-gap: 10px;
  max-width: 700px;
  margin: 0 auto;
  grid-template-rows: 2fr 2fr;
  grid-template-columns: 2fr 4fr 5fr 1fr;
}

.block {
  height: 200px;
}

.block--one {
  background: coral;
}

.block--two {
  background: cornflowerblue;
}

.block--three {
  background: burlywood;
}

.block--four {
  background: lightseagreen;
}
<main>
  <div class="block block--one"></div>
  <div class="block block--two"></div>
  <div class="block block--three"></div>
  <div class="block block--four"></div>
</main>

Upvotes: 2

Views: 1442

Answers (3)

Abel de Bruijn
Abel de Bruijn

Reputation: 180

main {
  display: grid;
  grid-gap: 10px;
  max-width: 700px;
  margin: 0 auto;
  grid-auto-flow: row;
}

.block {
  height: 200px;
}

.block--one {
  background: coral;
  grid-column: 1;
}

.block--two {
  background: cornflowerblue;
  grid-column: 2/ 6;
}

.block--three {
  background: burlywood;
  grid-column: 1 / 4;
}

.block--four {
  background: lightseagreen;
  grid-column: 4 / 6;
}
<main>
  <div class="block block--one"></div>
  <div class="block block--two"></div>
  <div class="block block--three"></div>
  <div class="block block--four"></div>
</main>

grid-auto-flow: row; Will start on new row if the element is not able to fit on the current row

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 371261

You can simplify the code by using a shorthand property.

In your first example, you're using all long-hand properties. For example, you have this:

.block--two {
  background: cornflowerblue;
  grid-column-start: 2;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 2;
}

Like with other CSS features, such as borders, margins and padding, there's a shorthand property to consolidate multiple lines of code.

In this case, there's the grid-area property, which shortens the code above to:

grid-area { 1 / 2 / 2 / 6 }

The values flow in this order:

  1. grid-row-start
  2. grid-column-start
  3. grid-row-end
  4. grid-column-end

main {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 200px;
  grid-gap: 10px;
  max-width: 700px;
  margin: 0 auto;
}

.block--one {
  background: coral;
  /* no need to specify placement here; default aligns to row 1, column 1 */
}

.block--two {
  background: cornflowerblue;
  grid-area: 1 / 2 / 2 / -1;
}

.block--three {
  background: burlywood;
  grid-area: 2 / 1 / 3 / 4;
}

.block--four {
  background: lightseagreen;
  grid-area: 2 / 4 / 3 / -1;
}
<main>
  <div class="block block--one"></div>
  <div class="block block--two"></div>
  <div class="block block--three"></div>
  <div class="block block--four"></div>
</main>

More details: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area

Upvotes: 2

Jackson
Jackson

Reputation: 911

A good way of defining the rows and columns can be by using grid-template-areas and grid-area which can define how many rows and columns a grid area should take up. This is especially helpful when changing the layout with @media tags, you only have to change the one attribute.

From your row and column definitions I can add each block to take up the space that I want it to.

See example for 2 rows by 4 columns for the 4 blocks.

main {
  display: grid;
  grid-gap: 10px;
  max-width: 700px;
  margin: 0 auto;
  grid-template-rows: 2fr 2fr;
  grid-template-columns: 2fr 4fr 5fr 1fr;
  grid-template-areas:
    "block1 block2 block2 block2"
    "block3 block3 block4 block4";
}

.block {
  height: 200px;
}

.block--one {
  grid-area: block1;
  background: coral;
}

.block--two {
  grid-area: block2;
  background: cornflowerblue;
}

.block--three {
  grid-area: block3;
  background: burlywood;
}

.block--four {
  grid-area: block4;
  background: lightseagreen;
}
<main>
  <div class="block block--one"></div>
  <div class="block block--two"></div>
  <div class="block block--three"></div>
  <div class="block block--four"></div>
</main>

Upvotes: 1

Related Questions