Make everything well aligned

All CSS Grid Properties

Property	Description
align-content	Vertically aligns the whole grid inside the container (when total grid size is smaller than container)
align-items	Aligns content in a grid item along the column axis
align-self	Aligns the content for a specific grid item along the column axis
display	Specifies the display behavior (the type of rendering box) of an element
column-gap	Specifies the gap between the columns
gap	A shorthand property for the row-gap and the column-gap properties
grid	A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties
grid-area	Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties
grid-auto-columns	Specifies a default column size
grid-auto-flow	Specifies how auto-placed items are inserted in the grid
grid-auto-rows	Specifies a default row size
grid-column	A shorthand property for the grid-column-start and the grid-column-end properties
grid-column-end	Specifies where to end the grid item
grid-column-start	Specifies where to start the grid item
grid-row	A shorthand property for the grid-row-start and the grid-row-end properties
grid-row-end	Specifies where to end the grid item
grid-row-start	Specifies where to start the grid item
grid-template	A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties
grid-template-areas	Specifies how to display columns and rows, using named grid items
grid-template-columns	Specifies the size of the columns, and how many columns in a grid layout
grid-template-rows	Specifies the size of the rows in a grid layout
justify-content	Horizontally aligns the whole grid inside the container (when total grid size is smaller than container)
justify-self	Aligns the content for a specific grid item along the row axis
place-self	A shorthand property for the align-self and the justify-self properties
place-content	A shorthand property for the align-content and the justify-content properties
row-gap	Specifies the gap between the grid rows

CSS Grid Subtopics with examples

Grid Container & Grid Items

Define a grid container using display: grid.

Example:

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
</div>

.grid-container {
  display: grid;
}

Grid Columns & Rows (grid-template-rows & grid-template-columns)

Defines rows and columns for the grid.

Example:

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
</div>

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

Fractional Units (fr)

Distributes space in a flexible manner.

Example:

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
</div>

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

Grid Gap (gap)

Defines spacing between grid items.

Example:

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
</div>

.grid-container {
  display: grid;
  gap: 10px;
}

Grid Item Placement (grid-column, grid-row)

Positions items within the grid.

Example:

<div class="grid-container">
  <div class="grid-item" style="grid-column: 1 / 3; grid-row: 2 / 4;">Item 1</div>
</div>

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

Auto-Fill & Auto-Fit

Adjusts columns dynamically.

Example:

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
</div>

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

Grid Areas (grid-template-areas)

Assigns names to grid sections.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Grid Example</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-areas:
        "header header"
        "sidebar main";
      grid-template-columns: 1fr 3fr;
      grid-template-rows: auto 1fr;
      height: 80vh;
      width: 80vw;
      gap: 20px;
      margin: auto;
    }

    .header {
      grid-area: header;
      background: lightblue;
      text-align: center;
      padding: 10px;
    }

    .sidebar {
      grid-area: sidebar;
      background: lightcoral;
      text-align: center;
      padding: 10px;
    }

    .main {
      grid-area: main;
      background: lightgreen;
      text-align: center;
      padding: 10px;
    }

    .grid-item, .header, .sidebar, .main {
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="main">Main</div>
  </div>
</body>
</html>

Alignment (justify-items, align-items, place-items)

Aligns items within the grid.

Example:

<div class="grid-container">
  <div class="grid-item">Item</div>
</div>

.grid-container {
  justify-items: center;
  align-items: center;
}

Implicit vs. Explicit Grid

Implicit: Created automatically.
Explicit: Defined explicitly.

Example:

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
</div>

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

Nesting Grids

Placing a grid inside another grid.

Example:

<div class="grid-container">
  <div class="grid-item nested">
    <div class="nested-grid">
      <div class="nested-item">Nested 1</div>
      <div class="nested-item">Nested 2</div>
    </div>
  </div>
</div>

.grid-item.nested {
  display: grid;
  grid-template-columns: 1fr 1fr;
}