• Home
  • Health
  • Software
  • Blog
  • grid

    CSS Grids Explained

    Grids are often used in web design, for making content fit nicely, especially for changing the alignment of certain screen sizes.


    For example, maybe you have a grid of articles, which contain maybe an image and a text preview of the article:

    [ article ] [ article ] [ article ]


    But, when your user switches to their phone, perhaps it's too hard to read three article blurbs side by side like that. So, the grid switches to one article per line:

    [ article ]

    [ article ]

    [ article ]


    For this, you could use a grid of 12 columns. Your CSS could detect the screen size, and make an article take up 4 columns when on a desktop screen, but take up all 12 columns when on a small phone screen. Perhaps an in-between screen (like a tablet) could have an article take up 6 columns.


    There are multiple external libraries that can be used for defining grids, but these days the built-in Grid display in CSS can handle it.


    #grid_div {
      display: grid;
    }
    


    See other posts for examples.