{"id":343682,"date":"2021-05-12T14:25:00","date_gmt":"2021-05-12T21:25:00","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=343682"},"modified":"2023-02-09T08:59:16","modified_gmt":"2023-02-09T16:59:16","slug":"complete-guide-grid","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/","title":{"rendered":"A Complete Guide to CSS Grid"},"content":{"rendered":"\n
\n
\n

Table of contents<\/h4>\n\n\n
    \n
  1. Introduction<\/a><\/li>\n\n\n\n
  2. Basics<\/a><\/li>\n\n\n\n
  3. Important Terminology<\/a><\/li>\n\n\n\n
  4. Grid Properties<\/a><\/li>\n\n\n\n
  5. Special Units & Functions<\/a><\/li>\n\n\n\n
  6. Fluid Columns Snippet<\/a><\/li>\n\n\n\n
  7. Animation<\/a><\/li>\n<\/ol>\n<\/div><\/div>\n<\/div>\n\n\n\n
    \n

    Get the poster!<\/h4>\n\n\n
    \n
    \n

    Reference this guide a lot? Here’s a high-res image you can print! <\/p>\n\n\n\n

    \n
    Download Free<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n
    \n
    \"\"<\/figure>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n
    \n \n

    Introduction to CSS Grid<\/h3>\n <\/summary>\n \n\n

    CSS Grid Layout (aka \u201cGrid\u201d or “CSS Grid”), is a two-dimensional grid-based layout system that, compared to any web layout system of the past, completely changes the way we design user interfaces. CSS has always been used to layout our web pages, but it\u2019s never done a very good job of it. First, we used tables, then floats, positioning and inline-block, but all of these methods were essentially hacks and left out a lot of important functionality (vertical centering, for instance). Flexbox<\/a> is also a very great layout tool, but its one-directional flow has different use cases<\/a> \u2014 and they actually work together<\/a> quite well! Grid is the very first CSS module created specifically to solve the layout problems we\u2019ve all been hacking our way around for as long as we\u2019ve been making websites.<\/p>\n\n\n\n

    The intention of this guide is to present the Grid concepts as they exist in the latest version of the specification. So I won\u2019t be covering the out-of-date Internet Explorer syntax (even though you can absolutely use Grid in IE 11<\/a>) or other historical hacks. <\/p>\n\n\n<\/details>\n\n\n

    \n \n

    CSS Grid basics<\/h3>\n <\/summary>\n \n\n

    As of March 2017, most browsers shipped native, unprefixed support for CSS Grid: Chrome (including on Android), Firefox, Safari (including on iOS), and Opera. Internet Explorer 10 and 11 on the other hand support it, but it\u2019s an old implementation with an outdated syntax. The time to build with grid is now!<\/p>\n\n\n\n

    To get started you have to define a container element as a grid with display: grid<\/a><\/code>, set the column and row sizes with grid-template-columns<\/a><\/code> and grid-template-rows<\/a><\/code>, and then place its child elements into the grid with grid-column<\/a><\/code> and grid-row<\/a><\/code>. Similarly to flexbox, the source order of the grid items doesn\u2019t matter. Your CSS can place them in any order, which makes it super easy to rearrange your grid with media queries. Imagine defining the layout of your entire page, and then completely rearranging it to accommodate a different screen width all with only a couple lines of CSS. Grid is one of the most powerful CSS modules ever introduced.<\/p>\n\n\n<\/details>\n\n\n

    \n \n

    Important CSS Grid terminology<\/h3>\n <\/summary>\n \n\n

    Before diving into the concepts of Grid it\u2019s important to understand the terminology. Since the terms involved here are all kinda conceptually similar, it\u2019s easy to confuse them with one another if you don\u2019t first memorize their meanings defined by the Grid specification. But don\u2019t worry, there aren\u2019t many of them.<\/p>\n\n\n\n

    \n

    Grid Container<\/h4>\n\n\n

    The element on which display: grid<\/code> is applied. It\u2019s the direct parent of all the grid items. In this example container<\/code> is the grid container.<\/p>\n\n\n\n

    <div class=\"container\">\n  <div class=\"item item-1\"> <\/div>\n  <div class=\"item item-2\"> <\/div>\n  <div class=\"item item-3\"> <\/div>\n<\/div><\/code><\/pre>\n\n\n
    <\/a>Grid Line<\/h4>\n\n\n
    The dividing lines that make up the structure of the grid. They can be either vertical (\u201ccolumn grid lines\u201d) or horizontal (\u201crow grid lines\u201d) and reside on either side of a row or column. Here the yellow line is an example of a column grid line.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n
    <\/a>Grid Track<\/h4>\n\n\n
    The space between two adjacent grid lines. You can think of them as the columns or rows of the grid. Here\u2019s the grid track between the second and third-row grid lines.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n
    Grid Area<\/h4>\n\n\n
    The total space surrounded by four grid lines. A grid area may be composed of any number of grid cells. Here\u2019s the grid area between row grid lines 1 and 3, and column grid lines 1 and 3.<\/p>\n\n\n\n
    \"\"<\/figure>\n<\/div>\n\n\n\n
    Grid Item<\/h4>\n\n\n
    The children (i.e. direct<\/em> descendants) of the grid container. Here the item<\/code> elements are grid items, but sub-item<\/code> isn\u2019t.<\/p>\n\n\n\n
    <div class=\"container\">\n  <div class=\"item\"> <\/div>\n  <div class=\"item\">\n    <p class=\"sub-item\"> <\/p>\n  <\/div>\n  <div class=\"item\"> <\/div>\n<\/div><\/code><\/pre>\n\n\n
    <\/a>Grid Cell<\/h4>\n\n\n
    The space between two adjacent row and two adjacent column grid lines. It\u2019s a single \u201cunit\u201d of the grid. Here\u2019s the grid cell between row grid lines 1 and 2, and column grid lines 2 and 3.<\/p>\n\n\n\n
    \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n<\/details>\n\n\n
    \n  \n          
    CSS Grid properties<\/h3>\n      <\/summary>\n  \n\n
    \n
    Properties for the Parent
    (Grid Container)<\/h4>\n\n\n
    \n  \n          Jump links      <\/summary>\n  \n\n