The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Grid Container Properties

Next ►
►

In this section, we will delve into the properties that can be applied to a grid container in CSS. Understanding these properties is crucial for effectively using CSS Grid to create complex and responsive layouts.

Key Concepts

  1. Grid Container: The parent element that holds the grid items.
  2. Grid Lines: The lines that define the structure of the grid.
  3. Grid Tracks: The rows and columns in the grid.
  4. Grid Cells: The individual units where grid items are placed.

Grid Container Properties

  1. display: grid

To create a grid container, you need to set the display property to grid or inline-grid.

.container {
  display: grid;
}

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

These properties define the number and size of the columns and rows in the grid.

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-template-rows: 50px 100px;
}
  • Example Explanation:
    • The grid will have three columns with widths of 100px, 200px, and 100px.
    • The grid will have two rows with heights of 50px and 100px.

  1. grid-template-areas

This property allows you to define named grid areas, making it easier to place items in specific parts of the grid.

.container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar main main"
    "footer footer footer";
}
  • Example Explanation:
    • The grid is divided into three rows and three columns.
    • The first row is entirely occupied by the "header".
    • The second row has "sidebar" in the first column and "main" in the second and third columns.
    • The third row is entirely occupied by the "footer".

  1. grid-gap, grid-row-gap, and grid-column-gap

These properties define the spacing between grid items.

.container {
  display: grid;
  grid-gap: 10px;
}
  • Example Explanation:
    • grid-gap sets both the row and column gaps to 10px.

  1. justify-items and align-items

These properties control the alignment of grid items within their cells.

.container {
  display: grid;
  justify-items: center;
  align-items: center;
}
  • Example Explanation:
    • justify-items: center centers items horizontally within their cells.
    • align-items: center centers items vertically within their cells.

  1. justify-content and align-content

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

.container {
  display: grid;
  justify-content: center;
  align-content: center;
}
  • Example Explanation:
    • justify-content: center centers the grid horizontally within the container.
    • align-content: center centers the grid vertically within the container.

  1. grid-auto-rows and grid-auto-columns

These properties define the size of rows and columns that are created automatically.

.container {
  display: grid;
  grid-auto-rows: 50px;
  grid-auto-columns: 100px;
}
  • Example Explanation:
    • Automatically created rows will have a height of 50px.
    • Automatically created columns will have a width of 100px.

  1. grid-auto-flow

This property controls how auto-placed items are inserted into the grid.

.container {
  display: grid;
  grid-auto-flow: row;
}
  • Example Explanation:
    • grid-auto-flow: row places items in rows by default.

Practical Example

Let's create a simple grid layout using the properties discussed.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Container Example</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      grid-template-rows: 100px 200px;
      grid-gap: 10px;
      justify-items: center;
      align-items: center;
    }
    .item {
      background-color: lightblue;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
</body>
</html>
  • Example Explanation:
    • The container has three columns and two rows.
    • The columns have widths of 1fr, 2fr, and 1fr, respectively.
    • The rows have heights of 100px and 200px.
    • There is a 10px gap between the grid items.
    • Items are centered both horizontally and vertically within their cells.

Exercises

Exercise 1: Create a Grid Layout

Create a grid container with the following specifications:

  • 4 columns with equal width.
  • 3 rows with heights of 100px, 150px, and 100px.
  • 20px gap between the grid items.
  • Center the items both horizontally and vertically.

Solution:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout Exercise</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 100px 150px 100px;
      grid-gap: 20px;
      justify-items: center;
      align-items: center;
    }
    .item {
      background-color: lightcoral;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
    <div class="item">Item 10</div>
    <div class="item">Item 11</div>
    <div class="item">Item 12</div>
  </div>
</body>
</html>

Exercise 2: Use grid-template-areas

Create a grid layout using grid-template-areas with the following structure:

  • Header spanning the entire first row.
  • Sidebar on the left and main content on the right in the second row.
  • Footer spanning the entire third row.

Solution:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Template Areas Exercise</title>
  <style>
    .container {
      display: grid;
      grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
      grid-gap: 10px;
    }
    .header {
      grid-area: header;
      background-color: lightgreen;
    }
    .sidebar {
      grid-area: sidebar;
      background-color: lightblue;
    }
    .main {
      grid-area: main;
      background-color: lightcoral;
    }
    .footer {
      grid-area: footer;
      background-color: lightgoldenrodyellow;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>

Conclusion

In this section, we covered the essential properties of a grid container in CSS. By understanding and utilizing these properties, you can create complex and responsive grid layouts. Practice using these properties in various combinations to become proficient in CSS Grid. In the next section, we will explore grid item properties to further enhance your grid layouts.

◄ Previous
◄
Next ►
►

CSS Mastery: From Beginner to Advanced

Module 1: Introduction to CSS

Module 2: Text and Font Styling

Module 3: Box Model and Layout

Module 4: Positioning and Floating

Module 5: Flexbox

Module 6: CSS Grid

Module 7: Advanced CSS Techniques

Module 8: Responsive Design

Module 9: Preprocessors and Frameworks

Module 10: Best Practices and Optimization

Module 11: Project: Building a Responsive Website

The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved