Creating responsive rows and columns INSIDE a CSS GRID layout

Question

I just made my first CSS grid layout and I am impressed by the way the template area's work, but at this moment in time I am also massively confused about the way I am suppose to fill the template area's with items that in itself have responsive columns.

For example. My template area named content contains a article tag with 1 row and 2 columns with responsive Flexboxgrid/Bootstrapgrid behaviour. Like so:

<main class="g-content">
       <article>
            <div class="row">
                <div class="col-xs-12 col-sm-6">
                   column left
                </div>
                <div class="col-xs-12 col-sm-6">
                    column right
                </div>
            </div>
        </article>
</main>

And CSS, where g-content is just a grid-area:

<style>
    .g-content {
      grid-area: content;
    }
</style>

I love the flexibility that these col- classes give, because they are in the html. So I add 2 classes in this case and the column behaves like I want it to.

So I'm not concerned with the overall template anymore, but I am concerned with the content blocks themselves... Now I throw out the idea of Flexboxgrid/Bootstrapgrid.

So, what would be a fast and flexible way to, in this case, create 2 responsive columns using CSS Grid, that behave differently on certain breakpoints?

Or isn't CSS Grid able to replace the Flexboxgrid/bootstrap responsive column system?

Update: I am considering rewriting the bootstrap column classes but on a CSS GRID way. Not sure if this is the ultimate solution, but it works.

@include screen('sm') {
  .row-sm-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.row-sm-6 {
    display: grid;
    grid-template-columns: 1fr 1fr;
 }
}

@include screen('md') {
  .row-md-4 {
     display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Ofcourse the col- classes need to become row- classes because the grid is apply from the container.

Are you using Bootstrap?

j08691
– j08691

2019-09-24 14:47:21 +00:00
Commented Sep 24, 2019 at 14:47 — j08691
– j08691, Commented Sep 24, 2019 at 14:47
I use Flexboxgrid. Same principle I guess.

Floris
– Floris

2019-09-24 14:48:05 +00:00
Commented Sep 24, 2019 at 14:48 — Floris
– Floris, Commented Sep 24, 2019 at 14:48

avcajaraville · Accepted Answer · 2019-09-25 10:53:53Z

2

If you are already using CSS grid, why don't you just stick to it?

I would recommend not to mix more layout mechanisms and just stick to grid.

Till we don't have css subgrid available for all browsers, we cannot share same grid areas between childs, but we can control all our grids as independient grids.

A possible solution would be:

<main class="g-content">
<article>
  <div class="inner-grid">
    <div class="inner-cell">
      column left
    </div>
    <div class="inner-cell">
      column right
    </div>
  </div>
</article>
</main>

And now, via CSS:

@media (min-width: [SM BREAKPOINT] {
  .inner-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gutter: GUTTER;
  }
}

Note that, as in smaller resolutions your layout is just rows, you only need to apply style when you are above SM breakpoint.

As an alternative, you can also archieve this via flex:

@media (min-width: [SM BREAKPOINT] {
  .inner-grid {
    display: flex;
    flex-flow: row nowrap;
  }
  .inner-cell {
    flex: 0 0 50%;
  }
}

In general:

For modern browser support, use CSS native grid or flex.
Try not to mix frameworks with different methodologies.
Use flex for alignment (like in your example).
Use grid to create grids (duh).

edited Sep 25, 2019 at 10:53

answered Sep 25, 2019 at 7:39

avcajaraville

9,0842 gold badges31 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Floris Over a year ago

Thanks you this was very informative. Would it be a good idea for me to rewrite the .row and .col- classes used in bootstrap but in the CSS GRID way? I think that in that way I stick to the CSS GRID way but keep the brilliance of the bootstrap-grid classes.

avcajaraville Over a year ago

Use whatever suits your needs :) Personally, I won't go back to use a framework for layouts, since we do have grids spec now, which is way more powerful than any of this frameworks will ever be.

Collectives™ on Stack Overflow

Creating responsive rows and columns INSIDE a CSS GRID layout

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related