Grid Layout

• Grid container and grid items
• Grid properties (grid-template-columns, grid-template-rows, gap, etc.)
• Creating complex layouts with CSS Grid

Grid Layout in CSS

CSS Grid Layout, or simply “Grid,” is a powerful layout system that allows for the creation of complex, responsive web layouts with precise control over the placement of elements. Unlike Flexbox, which is primarily designed for laying out items in a single dimension (either a row or a column), Grid Layout enables you to work in two dimensions (both rows and columns).

---

1. Grid Container and Grid Items

Just like Flexbox, Grid relies on the concept of a grid container and grid items.

a. Grid Container

The grid container is the parent element that holds grid items. To create a grid container, you apply the display: grid or display: inline-grid property to an element.

• display: grid: This makes the container a block-level grid container, meaning it will take up the full width of its parent container.
• display: inline-grid: This makes the container an inline-level grid container, meaning it will only take up as much width as its content.

Example:

.container {
  display: grid;
}

b. Grid Items

Grid items are the direct children of a grid container. These items will be placed into a grid defined by the grid container.

Example:

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

• Here, each .item element is a grid item within the .container.

---

2. Grid Properties

Grid Layout provides a wide range of properties that allow you to define the structure and behavior of the grid. These properties can be applied to both the grid container and grid items.

a. Properties for the Grid Container

1. grid-template-columns and grid-template-rows:

• These properties define the number and size of columns and rows in the grid.
• You can specify sizes in various units, such as pixels (px), percentages (%), fr units (fractions of available space), or even repeat patterns.

Example:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Creates three columns, the second one being twice as wide as the others */
  grid-template-rows: 100px 200px; /* Creates two rows with specified heights */
}

2. grid-column-gap, grid-row-gap, and gap:

• These properties define the spacing between columns (grid-column-gap), rows (grid-row-gap), or both (gap).

Example:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px;
  gap: 10px; /* Adds a 10px gap between both columns and rows */
}

3. grid-template-areas:

• This property allows you to define named grid areas, which can be referenced by grid items. It provides a visual representation of the grid layout.

Example:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-template-areas:
    "header header header"
    "sidebar content content";
}

4. grid-auto-flow:

• Controls the automatic placement of grid items that do not have an explicit grid area or row/column placement.
• Values include row, column, dense, and combinations like row dense.

Example:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: row; /* Items are placed row by row */
}

5. grid-auto-columns and grid-auto-rows:

• Define the size of any implicitly created columns or rows.

Example:

.container {
  display: grid;
  grid-template-columns: 100px;
  grid-auto-rows: 50px; /* Any new rows will have a height of 50px */
}

b. Properties for Grid Items

1. grid-column and grid-row:

• These shorthand properties specify where a grid item starts and ends along the grid’s columns and rows.
• You can use grid-column-start, grid-column-end, grid-row-start, and grid-row-end for more granular control.

Example:

.item {
  grid-column: 1 / 3; /* The item spans from the first column to the third */
  grid-row: 1 / 2; /* The item spans the first row */
}

2. grid-area:

• Assigns a grid item to a named grid area or specifies the start and end positions for both rows and columns.

Example:

.item {
  grid-area: header; /* The item is placed in the area named "header" */
}

3. justify-self and align-self:

• Control the alignment of a grid item within its grid cell along the inline (horizontal) and block (vertical) axes, respectively.

Example:

.item {
  justify-self: center; /* The item is centered horizontally in its grid cell */
  align-self: end; /* The item is aligned to the bottom of its grid cell */
}

4. justify-content and align-content:

• These properties control the alignment of the entire grid within the grid container.

Example:

.container {
  justify-content: center; /* The grid is centered horizontally within the container */
  align-content: start; /* The grid is aligned to the top of the container */
}

---

3. Creating Complex Layouts with CSS Grid

CSS Grid excels at creating complex layouts that are both responsive and flexible. Let’s walk through the creation of a complex layout using CSS Grid.

a. Basic Two-Column Layout

HTML:

<div class="container">
  <header class="header">Header</header>
  <nav class="nav">Navigation</nav>
  <main class="main">Main Content</main>
  <aside class="sidebar">Sidebar</aside>
  <footer class="footer">Footer</footer>
</div>

CSS:

.container {
  display: grid;
  grid-template-columns: 1fr 3fr; /* Two columns, one 1/4 width, the other 3/4 */
  grid-template-rows: auto auto 1fr auto; /* Rows for header, navigation, main content, and footer */
  gap: 10px; /* Gap between all grid items */
  grid-template-areas:
    "header header"
    "nav main"
    "sidebar main"
    "footer footer";
}

.header {
  grid-area: header;
}

.nav {
  grid-area: nav;
}

.main {
  grid-area: main;
}

.sidebar {
  grid-area: sidebar;
}

.footer {
  grid-area: footer;
}

b. Responsive Grid Layout

To create a responsive grid layout, you can use media queries to adjust the grid structure based on the viewport size.

CSS:

.container {
  display: grid;
  grid-template-columns: 1fr; /* Single column by default */
  grid-template-rows: auto;
  gap: 10px;
}

@media (min-width: 600px) {
  .container {
    grid-template-columns: 1fr 2fr; /* Two columns for larger screens */
  }
}

@media (min-width: 900px) {
  .container {
    grid-template-columns: 1fr 3fr 1fr; /* Three columns for even larger screens */
  }
}

In this example:

• The layout adjusts from a single-column layout on small screens to a two-column layout on medium screens, and a three-column layout on large screens.

c. Grid with Implicit and Explicit Tracks

CSS Grid allows you to define both explicit tracks (those you define with grid-template-columns and grid-template-rows) and implicit tracks (those automatically created by placing items outside the defined grid).

Example:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three equal-width columns */
  grid-template-rows: 100px; /* One row with a height of 100px */
  grid-auto-rows: 50px; /* Additional rows have a height of 50px */
}

.item1 {
  grid-column: 1 / 4; /* This item spans all three columns */
}

.item2 {
  grid-row: 2 / 4; /* This item spans two implicit rows */
}

---