Why aren't you using CSS Grids?

HTML & CSS
1

I’ve recently been inspired by this DjangoCon US 2017 - Don’t Use My Grid System (or any others) by Miriam Suzanne talk. Slides are found at: https://oddbooksapp.com/book/djangocon-layout

She gives a good rundown of:

  • CSS layout techniques that have historically been used
  • before moving on to a history of grid systems,
  • and near the end explores the new CSS Grid system
  • and delves in to some common uses for it.

Finally the talk concluses with:

  • Start with Grid - it’s the only real layout option
  • Fix the box model - by setting box-sizing to border-box
  • Stay in the Flow
  • Think dynamically - how to objects relate and change
  • Remove external gutter math
  • Get creative!
4 Likes
2

I have never tried a css grid system as I was put off by Bootstrap and the Yahoo? system a few years back:

Very big file
Confusing to use
Could never really get the layout I wanted
I like to be in control
Spent longer fighting it than writing my own css

3

Here’s a handy resources to help get you going: Get Started with Grid Layout

4

If you’d like an example of how easy it can be, I’ve run up a quick and dirty example that uses an ascii diagram (obtained from the above video) to design the layout of the page.

body {
  display: grid;
  grid-template-areas: 'header header'
                       'nav    main'
                       'footer footer';
  grid-template-columns: minmax(10em, 20%) 1fr;
  grid-template-rows: auto 1fr auto;
}

That example with some sample content can be seen at: https://jsfiddle.net/pmw57/aurm7h7k/

3 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.