CSS Grid Layout

CSS grid layout is a two-dimensional layout system for the web. It lets you organize content into rows and columns and offers many features to simplify the creation of complex layouts.

Similar to Flexbox, Grid has concepts of parent container and the child elements.

Create Grid container

Define grid container:

.container {
  display: grid;
}

Implicit and explicit grids

• Explicit grid is created using grid-template-columns or grid-template-rows.
• Implicit grid extends the defined explicit grid when content is placed outside of that grid, such as into the rows by drawing additional grid lines.

By default, tracks created in the implicit grid are auto sized, which in general means that they’re large enough to contain their content. If you wish to give implicit grid tracks a size, you can use the grid-auto-rows and grid-auto-columns properties.

.container {
  display: grid;
  grid-template-columns: 100px 100px auto;
}

Special Units & Functions

fr unit

The fr unit represents one fraction of the available space in the grid container to flexibly size grid rows and columns. The fr unit distributes space proportionally. You can specify different positive values for your tracks. Creating three tracks below:

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

Note: The fr unit distributes available space, not all space. Therefore, if one of your tracks has something large inside it, there will be less free space to share.

Sizing Keywords

• min-content: the minimum size of the content. Imagine a line of text like “E pluribus unum”, the min-content is likely the width of the word “pluribus”.
• max-content: the maximum size of the content. Imagine the sentence above, the max-content is the length of the whole sentence.
• auto: this keyword is a lot like fr units, except that they “lose” the fight in sizing against fr units when allocating the remaining space.
• Fractional units: fr

Sizing Functions

• minmax() function lets us set a minimum and maximum size for a track.
• fit-content() function uses the space available, but never less than min-content and never more than max-content.
• min() function.
• max() function.

repeat() function

The repeat() function can save some typing But repeat() can get extra fancy when combined with keywords:

• auto-fill: Fit as many possible columns as possible on a row, even if they are empty.
• auto-fit: Fit whatever columns there are into the space. Prefer expanding columns to fill space rather than empty columns.

Line-based placement

To position items along lines, we can specify the start and end lines of the grid area where an item should be placed. There are four properties we can use to do this:

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-column shorthand for grid-column-start and grid-column-end
• grid-row shorthand for grid-row-start and grid-row-end

header {
  grid-column: 1 / 3;
  grid-row: 1;
}

Means the header contain 1 to 3 column, and first row.

grid-template-areas

Positioning with grid-template-areas.

Other than Line-based placement, an alternative way to arrange items on your grid is to use the grid-template-areas property and give the various elements of your design a name.

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  gap: 20px;
}
header {
  grid-area: header;}
article {
  grid-area: content;}
aside {
  grid-area: sidebar;}
footer {
  grid-area: footer;}

The rules for grid-template-areas are as follows:

• You need to have every cell of the grid filled.
• To span across two cells, repeat the name.
• To leave a cell empty, use a . (period).
• Areas must be rectangular — for example, you can’t have an L-shaped area.
• Areas can’t be repeated in different locations.

Subgrid

It’s possible to nest a grid within another grid, creating a “subgrid”. You can do this by setting the display: grid property on a grid item.

Grid Container properties

justify-content

Use the justify-content property to align the grid inside the container. justify-content property to align the grid along the inline (row) axis.

align-content

This property aligns the grid along the block (column) axis. The align-content property is used to vertically align the whole grid inside the container.

justify-items

Aligns grid items along the inline (row) axis. This value applies to all grid items inside the container.

align-items

Aligns grid items along the block (column) axis. This value applies to all grid items inside the container.

Grid Items properties

• justify-self
• align-self
• place-self
• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-area
• grid-column
• grid-row

Support RWD

Fluid columns snippet

Fluid width columns that break into more or less columns as space is available, with no media queries!

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* This is better for small screens, once min() is better supported */
  /* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */
  gap: 1rem;
}

Reference

• mdn
• css-tricks