What is CSS Grid

CSS Grid is the most powerful layout system in CSS.
With it, you can build layouts faster and more easily than any other layout tool.

CSS Grid vs Flexbox

CSS Grid is not meant to replace Flexbox.
Flexdbox is one-dimensional. CSS Grid is two-dimensional.
Flexbox and Grid are complementary layout tools, and each have their specialties.

Grid Properties

Grid Containers – A grid formatting context; child’s space, size, and alignment.
Grid Item – Child of a grid container.
Grid Lines – Divides the grid container into rows and columns.
Grid Track – The space between two adjacent grid lines.

Properties

grid initiates a grid container.
grid-template-columns sets the column track.
grid-template-rows sets the row tracks.
grid-column-gap sets columns gap.
grid-row-gap sets rows gap.
grid-gap sets columns and rows gaps.

Example

.container {
  display: grid;
  grid-template-rows: 200px 300px 100px;
  grid-template-columns: 200px 400px 200px;
  grid-gap: 20px 20px;
}

Example

.my-grid-container {
    max-width: 800px;
    display: grid;
    grid-template-columns: 200px 300px 20% auto; /* 4 columns */
    grid-template-rows: 100px 200px;
    grid-gap: 15px 20px; /* grid-column-gap: 20px + grid-row-gap: 15px */
}

Customizing Tracks

fr Fraction of Space Unit

fr – A flexible length unit that represents a fraction of the available space inside the grid container.

Example

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* equals %33.33  %33.33  %33.33; */
}

Example

.wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* equals %25 %50 %25; */
}

repeat() Function

repeat(count, size) will repeat grid track of certain size.

.wrapper {
  grid-template-columns: 2fr repeat(4, 1fr) 2fr; /* 6 columns */
}

minmax() Funciton

minmax(min, max) sets a grid track’s min and max size.
Examples

• grid-template-columns: minmax(200px, 300px) 1fr 1fr;
  The last two columns are flexible, and the first one is partially flexible.
• grid-template-columns: minmax(200px, 1fr) 1fr 1fr;
• grid-template-columns: repeat(3, minmax(200px, 1fr));

---

Auto Fill / Auto Fit

The Grid Layout repeat notation supports two keywords –auto-fill and auto-fit– to help with setting items to automatically wrap and adjust to fit their container’s width.

auto-fill Generates as many tracks necessary to fit the available space, without causing the grid to overflow.
A value that determines automatically the number of columns to fit dependin on screen width. This saves you from using media queries for responsiveness.

Examples

• grid-template-columns: repeat(auto-fill, 200px);
• grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  More reponsive with auto-fill.

auto-fit A value that determines automatically the number of…

Examples

• grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Implicit Grid Items

When you create a grid layout with the grid-template-rows and grid-template-columns properties, you are defining what’s called an “explicit grid”. What happens if there are too many grid items to fit inside the grid you defined? To handle this uncertainty, Grid Layout provides an “implicit grid.” The implicit grid is automatically generated by the grid container to position any extra items outside of the explicit grid.

The grid you define with grid-template-rows and grid-template-columns is called: the explicit grid
If there are too many items to fit inside the grid you defined, the grid container generates an implicit grid to accommodate the extra items.

grid-auto-rows/grid-auto-columns – Contols implicit grid tracks. Implicit tracks are the ones not part of the predefined grid.

Examples:

.container {
  grid-auto-rows: 250px; /* All new implicit rows will be 250px high. */
  grid-auto-rows: minmax(150px, auto); /* More flexible for content. */ 
}

Grid Flow

grid-auto-flow: Changes grid flow from vertical to horizontal and vice versa.

Example

.container {
  grid-auto-flow: column;   /* Switch grid flow. */
  grid-auto-columns: 100px; /* Implicit column tracks are 100px wide. */ 
}