CSS Grid - Responsive - Multiple 3 columns rows to 2 columns rows

Question

I'm creating a page with multiple rows with 3 column grid but, in Tablet, change to 2 column grid and mobile 1 column grid.

In Tablet, when creating the 2 column grid, it creates an empty column at the end.

Is it possible to connect both rows, so the second one occupies the empty spot of the first row?

Or the only chance is the columns are organized on a single row?

<div class="block-container grid-3-cols_wrapper">
   <!-- Row 1 -->
   <div class="has-3-columns">
      <!-- Col 1 -->
      <div class="block-column">
         <div><img src="..." alt=""></div>
      </div>

      <!-- Col 2 -->
      <div class="block-column">
         <div><img src="..." alt=""></div>
      </div>

      <!-- Col 3 -->
      <div class="block-column">
         <div><img src="..." alt=""></div>
      </div>

   <!-- Row 2 -->
   <div class="has-3-columns">
      <!-- Col 1 -->
      <div class="block-column">
         <div><img src="..." alt=""></div>
      </div>

      <!-- Col 2 -->
      <div class="block-column">
         <div><img src="..." alt=""></div>
      </div>

      <!-- Col 3 -->
      <div class="block-column">
         <div><img src="..." alt=""></div>
      </div>
</div>

Is there any CSS that is relevant to this question? If so, please add it. — ksav, Jan 04 '19 at 19:18
@ksav if you know that his code is lacking CSS why creating a snippet? — Temani Afif, Jan 04 '19 at 19:36
Maybe this answer will help you https://stackoverflow.com/q/53434024/8437694 — IvanS95, Jan 04 '19 at 20:53
Possible duplicate of [How to limit the amount of columns in larger viewports with CSS Grid and auto-fill/fit?](https://stackoverflow.com/questions/53434024/how-to-limit-the-amount-of-columns-in-larger-viewports-with-css-grid-and-auto-fi) — IvanS95, Jan 04 '19 at 21:21
If you’re using CSS grid, why are you complicating your life by creating hardcoded rows? *Use* CSS grid. — David Thomas, Jan 04 '19 at 21:29

zeduke · Answer 1 · 2019-01-04T21:15:34.980

This should hopefully get you in the right direction.

I've done the CSS so it mobile up. So first media query is for tablets, second is for desktops and the width: 100% is for mobile, so obviously will display one column. You can modify this to suit what you need. Play around with it and any issues comment and I will have a look :)

FlexBox approach

flex-direction The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). Have a look at examples here

flex-flow The flex-flow CSS property is a shorthand property for flex-direction and flex-wrap properties. Have a read here

justify-contentThe CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. Have a read here

.grid-container {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
}

.grid-item {
  display: flex;
  background-color: orange;
  width: calc(100% - 10px);
  margin: 5px
}

@media (min-width: 720px) {
  .grid-item {
    width: calc(33.333% - 10px);
  }
}

@media (min-width: 1020px) {
  .grid-item {
    width: calc(25% - 10px);
  }
}

<div class='grid-container'>
  <div class='grid-item'>item 1</div>
  <div class='grid-item'>item 2</div>
  <div class='grid-item'>item 3</div>
  <div class='grid-item'>item 4</div>
  <div class='grid-item'>item 5</div>
  <div class='grid-item'>item 6</div>
</div>

Remember if you change the margin value to say 20px you will then also have to change the width value as it's doing this:

width: calc(grid-item-desired-width% - margin);

I'd really recommend reading the link above as they all have interactive demonstrations which will give you a visual example of how these flexbox properties work. I'd also recommend just playing around with flex-box and maybe try out different values to see how they act on your grid. It's the best way to learn it and get it stuck in your head. Hope you find the above helpful.

CSS Grid approach

Another way is using CSS Grid. Wasn't sure what way you want but i'd personally go with flexbox. In case you want it below is the CSS grid approach

.grid-container {
  display: grid;
  grid-template-columns: auto;
  padding: 10px;
  grid-gap: 10px 10px;
}

.grid-item {
  border: 1px solid black;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

@media (min-width: 720px) {
  .grid-container {
    grid-template-columns: auto auto auto;
  }
}

@media (min-width: 1020px) {
  .grid-container {
    grid-template-columns: auto auto auto auto;
  }
}

<div class='grid-container'>
  <div class='grid-item'>item 1</div>
  <div class='grid-item'>item 2</div>
  <div class='grid-item'>item 3</div>
  <div class='grid-item'>item 4</div>
  <div class='grid-item'>item 5</div>
  <div class='grid-item'>item 6</div>
</div>

Just took column grid as wanting a grid, not a specific way of doing the grid :D would still be helpful, if he was to use CSS Grid approach will update my answer — zeduke, Jan 04 '19 at 21:01

Dayley · Answer 2 · 2019-07-11T03:46:39.127

You would definitely be better with a Flex for this. Flex is... more Flexible. Where as a Gris is a set layout usually.

.flex-grid {
  display: flex;
}
.flex-grid .col {
  flex: 1;
}

.flex-grid { 
  margin: 0 0 20px 0;
}
.col {
  background-color: #135;
  color: white;
  font-family:Verdana, Geneva, sans-serif;
  font-size: 150%;
  margin: 0px 5px 5px 5px;
  border-radius: 5px;
  padding: 20px;
}

 <div class="flex-grid">
  <div class="col">Column A</div>
  <div class="col">Column B</div>
  <div class="col">Column C</div>
  <div class="col">Column D</div>
</div>

<div class="flex-grid">
  <div class="col">Column E</div>
  <div class="col">Column F</div>
  <div class="col">Column G</div>
</div>

<div class="flex-grid">
  <div class="col">Column H</div>
  <div class="col">Column I</div>
</div>

<div class="flex-grid">
  <div class="col">Column J</div>
</div>

Hope this helps! Now all you need is your @Media queries for certain screen sizes.

CSS Grid - Responsive - Multiple 3 columns rows to 2 columns rows

2 Answers2