4
9 Comments

Better start learning the CSS Grid!

https://caniuse.com/#feat=css-grid

It just jumped up to 86% supported to 76% from last month. The CSS Grid solves a ton of problems in terms of structuring layouts, and enables you to do stuff that previously wasn't possible with CSS alone (like reorganizing entire sections of your layout with media queries -- imagine swapping your footer with your header on desktop / mobile!)

It also completely negates having to use a CSS framework for grid / column support.

You can actually create a responsive grid system with the CSS grid with about 3 lines of code:

  .container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     grid-gap: 10px;
  }

Just finished recording a course on the CSS grid, so I'm excited with everything I learned and subsequently taught.

  1. 4

    Using it to lay out some new pages for Indie Hackers as we speak!

  2. 1

    +personally, being a Kenyan, i cant use anything that Internet Explorer 10 can't sanely support... i bet those statistic don't count African Countries... besides, am still trying to understand by how far flexbox is better that display: table...

  3. 1

    Support is getting better, but IE11 bugs are still keeping me from adopting it on the daily.

  4. 1

    Does CSS Grid offers something that Flexbox doesn't?

    I'm asking because I use Flexbox last months and it's awesome. Making Bootstrap a redundant behemoth. So I want to know is CSS Grid better?

    1. 3

      Flexbox was created for single dimension layouts; ie vertical alignment of multiple columns. However, it's not suitable for two dimensional alignment.

      Since most web grids rely only on alignment along the horizontal axis, Flexbox is a better tool for such grids (although CSS Grids can achieve the same). If you're looking for a true grid, meaning alignment control along both the horizontal and vertical axis, CSS Grid would be the better tool.

    2. 2

      It's not about which is better. They are different tools, and the goal should be to use the right tol for the job.

      I'd recommend reading this article from OG Grid Guru Rachel Andrews on the topic: https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/

    3. 1

      They go very well together. I like using grid for layout and then flexbox for the layout within the layout, if that makes sense.

    4. 3

      This comment was deleted 7 years ago