Grid Container

First, you designate an element as a grid container. This element will hold the grid items (your content). You can do this by setting the element's display property to grid or inline-grid.

.container {
  display: grid;
}

/* Or for an inline grid */
.inline-container {
  display: inline-grid;
}

Defining Rows and Columns

You define the rows and columns in the grid container using grid-template-rows and grid-template-columns.

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

Grid Gap

Grid gap is the space between each row and column. Use grid-gap, grid-row-gap, and grid-column-gap.

.container {
  display: grid;
  grid-gap: 10px; /* Space between rows and columns */
}

Placing Items

You can place grid items in specific locations using grid-column-start, grid-column-end, grid-row-start, and grid-row-end.

.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

Shorthand Properties

There are shorthand properties for quicker definitions.

.item {
  grid-column: 1 / 3; /* Start at line 1 and end at line 3 */
  grid-row: 2 / 4;
}

Fractional Units (fr)

The fr unit allows you to distribute available space in fractions.

.container {
  grid-template-columns: 1fr 2fr 1fr; /* 2nd column is twice as wide as the others */
}

Repeat Function

To avoid repetition, use repeat().

.container {
  grid-template-columns: repeat(3, 1fr); /* Creates 3 columns of equal width */
}

auto-fill and auto-fit

auto-fill and auto-fit are used with repeat() to automatically place as many items as possible.

.container {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

Grid Areas

Define areas in your grid and assign items to these areas.

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

.header {
  grid-area: header;
}

Responsive Design

You can create responsive designs by combining CSS Grid with media queries.

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

@media (min-width: 600px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}

Practice

The best way to learn CSS Grid is through practice. Try creating a basic layout with a header, sidebar, main content area, and footer. Experiment with different configurations and see how the elements rearrange themselves.