CSS Grid Flow Different Sized Blocks

Question

Is it possible to create a CSS grid that allows for different sized content blocks that don't have fixed starting positions with other blocks flowing around?

Here's my test

HTML

<div class="grid">

  <div class="item">Small 1</div>
  <div class="item">Small 2</div>
  <div class="item large">Large 1</div>
  <div class="item large">Large 2</div>

  <div class="item">Small 3</div>
  <div class="item">Small 4</div>
  <div class="item">Small 5</div>
  <div class="item">Small 6</div>

  <div class="item">Small 7</div>
  <div class="item">Small 8</div>
  <div class="item">Small 9</div>
  <div class="item">Small 10</div>

  <div class="item">Small 11</div>
  <div class="item">Small 12</div>
  <div class="item">Small 13</div>

</div>

CSS

* { 
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}   

body {
  padding: 5em;
}

.grid { 
  display: grid; 
  grid-template-columns: 25% 25% 25% 25%; 
  grid-gap: 1em 1em;
  grid-auto-flow: row dense;
}

.item {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 0.25em;
  padding: 2em;
}

.large {
  background: rgba(255, 0, 0, 0.25);
  grid-column: auto / span 2;
  grid-row: auto / span 2;
}

Fiddle: https://jsfiddle.net/bLjzscLs/

Expected:

Actual:

score 2 · Answer 1 · answered Jun 20 '17 at 13:39

Of course you can! Simply add height: <insert value that's above 100px here> to your CSS under .large and find the correct values to reach the expected result.

Example:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  padding: 5em;
}

.grid {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-gap: 1em 1em;
  grid-auto-flow: row dense;
}

.item {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 0.25em;
  padding: 2em;
}

.large {
  background: rgba(255, 0, 0, 0.25);
  grid-column: auto / span 2;
  grid-row: auto / span 2;
  height: 200px;
}

<div class="grid">

  <div class="item">Small 1</div>
  <div class="item">Small 2</div>
  <div class="item large">Large 1</div>
  <div class="item large">Large 2</div>

  <div class="item">Small 3</div>
  <div class="item">Small 4</div>
  <div class="item">Small 5</div>
  <div class="item">Small 6</div>

  <div class="item">Small 7</div>
  <div class="item">Small 8</div>
  <div class="item">Small 9</div>
  <div class="item">Small 10</div>

  <div class="item">Small 11</div>
  <div class="item">Small 12</div>
  <div class="item">Small 13</div>

</div>

Thanks for your answer. I'm interpreting this as moving from a dynamic layout to a fixed layout as a height is being set. Is that correct? — dai.hop, Jun 20 '17 at 14:38

Anoop Mayampilly Muraleedharan · Answer 2 · 2017-06-20T13:55:41.430

0

Actually your code will work the way as you expected. Try adding a large paragraph into the 'large 1' area with many lines as possible and see the output yourself.

<div class="item large">Add a large paragraph with many new lines as possible and check the ouput</div>

Anyway you can also use the code provided here -> https://jsfiddle.net/anoopmnm/dopt5s4y/

Or Just increase the value from grid-row: auto / span 2; to grid-row: auto / span 11; in your style sheet

edited Jun 20 '17 at 13:55

answered Jun 20 '17 at 13:43

Anoop Mayampilly Muraleedharan

407
1
9
27

1

Thank you Dexter - I'm unsure why your answer works though. My understanding would be that changing the span from 2 rows to 11 rows would make that block span 11 rows. Are you able to clarify? – dai.hop Jun 20 '17 at 14:36

CSS Grid Flow Different Sized Blocks

2 Answers2