CODEWITHSUNDEEP
csscss-grid
Floris
Floris

Reputation: 3127

Creating responsive rows and columns INSIDE a CSS GRID layout

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.

Upvotes: 1

Views: 1586

Answers (1)

avcajaraville
avcajaraville

Reputation: 9084

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).

Upvotes: 2

Related Questions