DEV Community

MOYED
MOYED

Posted on

CSS Grid: The ultimate layout tool

Ultimate layout tool

  • Grid enables us to created grids.
  • We can work on 2-dimension, vertical & horizontal axis at the same time.
  • Opens up new layout possibilities which we didn’t had.

Setting up a grid

display: grid;
Enter fullscreen mode Exit fullscreen mode
  • Margins no longer collapse

Template rows and columns

grid-template-columns: 200px 200px 350px; // set the width
grid-template-rows: 50px 200px; // set the height

// shorthand
grid-template: 50px 200px / 200px 200px 350px;
Enter fullscreen mode Exit fullscreen mode

Placing items on the grid

// Used on grid container
grid-template-columns: 200px 200px 350px; // set the width
grid-template-rows: 50px 200px; // set the height

// Used on grid item
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;

// shorthand
grid-row: 1 / 3;
grid-column: 2 / 3;

// end line is -1
grid-column: 1 / -1; // start to the end
Enter fullscreen mode Exit fullscreen mode
  • Overlaying items are easy.

Spanning

grid-column: span 2; // from line 1 to 3
grid-column: 2 / span 2; //from line 2 to 4
Enter fullscreen mode Exit fullscreen mode

Similarities to flexbox

  1. auto

    When defining our rows, we mostly don’t want to set an exact height, we want it to match the content.

    grid-template-row: 50px auto;
    

    Height is fixed to the largest item’s height. Every items are stetched as default.

    If we don’t declare grid-template-row , it becomes auto.

  2. align-items & justify-items

    • justify-items: align each items horizontally
    • align-items: align items vertically
    justify-items: end;
    align-items: start;
    
  3. align-self & justify-self

    Similar to 2, but it applies to individual grid item.


Making gap between columns & rows

For margin, we can make empty column & row. Also we can use gap .

  • column-gap: Explicitly declare gap between columns
  • row-gap: Explicitly declare gap between rows
column-gap: 2em;
row-gap: 1em;

// shorthand
gap: 1em /2em;
Enter fullscreen mode Exit fullscreen mode
  • Gaps at the outer top, bottom, left, right is not added, so we have to use the empty column & row approach.
  • Also used for flexbox.

grid-areas

Give names to different parts of grid.

.grid {
    grid-template-areas:
        "sidebar header header"
        "sidebar content content"
        "sidebar footer footer";
}

.header {
    grid-area: header;
}

.content {
    grid-area: content;
}
Enter fullscreen mode Exit fullscreen mode
  • blank grid

    // for blank grid
    grid-template-areas: 
        "header header header"
        ". content ."
        ". sidebar ."
        "footer footer footer";
    
  • grid-area + media query

    .grid {
        grid-template-columns: 5em auto 5em;
        grid-template-areas: 
        "header header header"
        ". content ."
        ". sidebar ."
        "footer footer footer"; 
    }
    
    @media (min-width: 600px) {
        .grid {
            grid-template-columns: 1em auto 150px 1em;
            grid-template-areas: 
                ". header header ."
                ". content sidebar ."
                ". footer footer ."
        }
    }
    

minmax()

Setting a min-width and max-width to our template columns and rows.

grid-template-columns: 1em minmax(100px, 200px) auto 1em;
Enter fullscreen mode Exit fullscreen mode

fr unit

fr unit is used to distribute a fraction of available space. It makes the item behave like a flex item with flex: 1 1 auto .

Easiest way to create equal columns.

  • We cannot use fr for minimum value

    Instead we can use auto or 0px .

    grid-template-columns: 1fr minmax(250px, 1fr) 1fr;
    
    grid-template-columns: 1fr 1fr minmax(auto, 500px);
    

Top comments (0)