CSS Style grid Property: CSS Grid Layout

CSS grid Property: Mastering CSS Grid Layout

The CSS grid property is a powerful tool for creating two-dimensional layouts on the web. It enables developers to divide web pages into rows and columns, providing precise control over the placement and sizing of elements. This guide provides a comprehensive overview of the grid property, including its syntax, values, and practical examples.

What is CSS Grid Layout?

CSS Grid Layout is a two-dimensional layout system that allows you to create complex and responsive web designs with ease. Unlike traditional layout methods like floats and flexbox (which are primarily one-dimensional), CSS Grid enables you to control both rows and columns, making it ideal for structuring entire web pages or complex UI components.

Purpose of the CSS grid Property

The main purpose of the CSS grid property is to:

• Enable the creation of complex, two-dimensional layouts.
• Provide control over the sizing and positioning of elements within a grid.
• Facilitate responsive web design by adapting layouts to different screen sizes.
• Simplify the structure of web pages with a clear and organized approach.

Getting Started with CSS Grid

To start using CSS Grid, you need to define a grid container. This is done by setting the display property of an element to grid or inline-grid.

.grid-container {
  display: grid; /* or inline-grid */
}

Basic Syntax

The grid property is a shorthand property for setting many grid-related properties at once. It can be used in several forms, offering flexibility in defining grid layouts. The most common use cases include:

1. Explicit Grid: Defines the rows and columns of the grid explicitly.
2. Implicit Grid: Allows the grid to automatically create rows or columns as needed.
3. Subgrid: Enables nested grids to inherit row and column definitions from their parent.

Syntax: Shorthand for grid-template-rows and grid-template-columns

grid: none | <grid-template-rows> / <grid-template-columns> | <grid-template-areas>;

Values

Value	Description
`none`	Specifies that the element is not a grid container.
`grid-template-rows / grid-template-columns`	Defines the rows and columns of the grid using the `grid-template-rows` and `grid-template-columns` properties.
`grid-template-areas`	Defines the grid layout using named grid areas specified by the `grid-template-areas` property.

Grid Container Properties

When an element is declared as a grid container, several properties can be used to define the grid’s structure and behavior. Here are some essential grid container properties:

Property	Description
`grid-template-rows`	Defines the height of each row in the grid.
`grid-template-columns`	Defines the width of each column in the grid.
`grid-template-areas`	Defines named grid areas, allowing elements to be placed in specific regions.
`grid-gap`	Sets the gap between rows and columns in the grid (shorthand for `grid-row-gap` and `grid-column-gap`).
`grid-auto-rows`	Defines the height of implicitly created rows.
`grid-auto-columns`	Defines the width of implicitly created columns.
`grid-auto-flow`	Controls how auto-placed items are inserted into the grid.

Grid Item Properties

Once the grid container is set up, you can control the placement and sizing of individual grid items using the following properties:

Property	Description
`grid-row-start`	Specifies the row to start the grid item.
`grid-row-end`	Specifies the row to end the grid item.
`grid-column-start`	Specifies the column to start the grid item.
`grid-column-end`	Specifies the column to end the grid item.
`grid-row`	Shorthand for `grid-row-start` and `grid-row-end`.
`grid-column`	Shorthand for `grid-column-start` and `grid-column-end`.
`grid-area`	Can be used as a shorthand for `grid-row-start`, `grid-column-start`, `grid-row-end` and `grid-column-end`, or to assign a name to the item so that can be referenced by the grid-template-areas property

Basic Examples

Let’s explore some basic drawing operations with the CSS grid property. Each example below includes the necessary HTML and CSS code to render a basic grid layout.

Creating a Simple Grid

This example demonstrates how to create a basic grid container with three columns and two rows.

<div class="grid-container-simple" style="border: 1px solid black;">
  <div class="grid-item-simple">Item 1</div>
  <div class="grid-item-simple">Item 2</div>
  <div class="grid-item-simple">Item 3</div>
  <div class="grid-item-simple">Item 4</div>
  <div class="grid-item-simple">Item 5</div>
  <div class="grid-item-simple">Item 6</div>
</div>
<style>
  .grid-container-simple {
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 10px;
  }

  .grid-item-simple {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
  }
</style>

<div
  class="code-output"
  style="display: flex; justify-content: center;"
>
  <div class="grid-container-simple-out" style="border: 1px solid black;">
    <div class="grid-item-simple-out">Item 1</div>
    <div class="grid-item-simple-out">Item 2</div>
    <div class="grid-item-simple-out">Item 3</div>
    <div class="grid-item-simple-out">Item 4</div>
    <div class="grid-item-simple-out">Item 5</div>
    <div class="grid-item-simple-out">Item 6</div>
  </div>
</div>
<style>
  .grid-container-simple-out {
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 10px;
  }

  .grid-item-simple-out {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
  }
</style>

Using fr Units for Flexible Sizing

The fr unit represents a fraction of the available space in the grid container. This example shows how to use fr units to create flexible columns.

<div class="grid-container-fr" style="border: 1px solid black;">
  <div class="grid-item-fr">Item 1</div>
  <div class="grid-item-fr">Item 2</div>
  <div class="grid-item-fr">Item 3</div>
  <div class="grid-item-fr">Item 4</div>
  <div class="grid-item-fr">Item 5</div>
  <div class="grid-item-fr">Item 6</div>
</div>
<style>
  .grid-container-fr {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    padding: 10px;
  }

  .grid-item-fr {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
  }
</style>

<div
  class="code-output"
  style="display: flex; justify-content: center;"
>
  <div class="grid-container-fr-out" style="border: 1px solid black;">
    <div class="grid-item-fr-out">Item 1</div>
    <div class="grid-item-fr-out">Item 2</div>
    <div class="grid-item-fr-out">Item 3</div>
    <div class="grid-item-fr-out">Item 4</div>
    <div class="grid-item-fr-out">Item 5</div>
    <div class="grid-item-fr-out">Item 6</div>
  </div>
</div>
<style>
  .grid-container-fr-out {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    padding: 10px;
  }

  .grid-item-fr-out {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
  }
</style>

Using grid-gap to Create Spacing

The grid-gap property is used to add spacing between grid items.

<div class="grid-container-gap" style="border: 1px solid black;">
  <div class="grid-item-gap">Item 1</div>
  <div class="grid-item-gap">Item 2</div>
  <div class="grid-item-gap">Item 3</div>
  <div class="grid-item-gap">Item 4</div>
  <div class="grid-item-gap">Item 5</div>
  <div class="grid-item-gap">Item 6</div>
</div>
<style>
  .grid-container-gap {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 20px;
    padding: 10px;
  }

  .grid-item-gap {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
  }
</style>

<div
  class="code-output"
  style="display: flex; justify-content: center;"
>
  <div class="grid-container-gap-out" style="border: 1px solid black;">
    <div class="grid-item-gap-out">Item 1</div>
    <div class="grid-item-gap-out">Item 2</div>
    <div class="grid-item-gap-out">Item 3</div>
    <div class="grid-item-gap-out">Item 4</div>
    <div class="grid-item-gap-out">Item 5</div>
    <div class="grid-item-gap-out">Item 6</div>
  </div>
</div>
<style>
  .grid-container-gap-out {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 20px;
    padding: 10px;
  }

  .grid-item-gap-out {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
  }
</style>

Positioning Items with grid-column and grid-row

This example demonstrates how to position grid items using the grid-column and grid-row properties.

<div class="grid-container-position" style="border: 1px solid black;">
  <div class="grid-item-position item1">Item 1</div>
  <div class="grid-item-position item2">Item 2</div>
  <div class="grid-item-position item3">Item 3</div>
  <div class="grid-item-position item4">Item 4</div>
</div>
<style>
  .grid-container-position {
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 10px;
    grid-gap: 10px;
  }

  .grid-item-position {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
  }

  .item1 {
    grid-column: 1 / 3;
  }

  .item4 {
    grid-column: 2 / 4;
    grid-row: 2;
  }
</style>

<div
  class="code-output"
  style="display: flex; justify-content: center;"
>
  <div class="grid-container-position-out" style="border: 1px solid black;">
    <div class="grid-item-position-out item1-out">Item 1</div>
    <div class="grid-item-position-out item2-out">Item 2</div>
    <div class="grid-item-position-out item3-out">Item 3</div>
    <div class="grid-item-position-out item4-out">Item 4</div>
  </div>
</div>
<style>
  .grid-container-position-out {
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 10px;
    grid-gap: 10px;
  }

  .grid-item-position-out {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
  }

  .item1-out {
    grid-column: 1 / 3;
  }

  .item4-out {
    grid-column: 2 / 4;
    grid-row: 2;
  }
</style>

Named Grid Areas

The grid-template-areas property allows you to define named grid areas, making it easier to visualize and control the layout.

<div class="grid-container-areas" style="border: 1px solid black;">
  <div class="grid-item-areas header">Header</div>
  <div class="grid-item-areas menu">Menu</div>
  <div class="grid-item-areas main">Main</div>
  <div class="grid-item-areas right">Right</div>
  <div class="grid-item-areas footer">Footer</div>
</div>
<style>
  .grid-container-areas {
    display: grid;
    grid-template-areas:
      "header header header"
      "menu main right"
      "footer footer footer";
    grid-gap: 10px;
    padding: 10px;
  }

  .grid-item-areas {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
  }

  .header {
    grid-area: header;
  }

  .menu {
    grid-area: menu;
  }

  .main {
    grid-area: main;
  }

  .right {
    grid-area: right;
  }

  .footer {
    grid-area: footer;
  }
</style>

<div
  class="code-output"
  style="display: flex; justify-content: center;"
>
  <div class="grid-container-areas-out" style="border: 1px solid black;">
    <div class="grid-item-areas-out header-out">Header</div>
    <div class="grid-item-areas-out menu-out">Menu</div>
    <div class="grid-item-areas-out main-out">Main</div>
    <div class="grid-item-areas-out right-out">Right</div>
    <div class="grid-item-areas-out footer-out">Footer</div>
  </div>
</div>
<style>
  .grid-container-areas-out {
    display: grid;
    grid-template-areas:
      "header header header"
      "menu main right"
      "footer footer footer";
    grid-gap: 10px;
    padding: 10px;
  }

  .grid-item-areas-out {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
  }

  .header-out {
    grid-area: header;
  }

  .menu-out {
    grid-area: menu;
  }

  .main-out {
    grid-area: main;
  }

  .right-out {
    grid-area: right;
  }

  .footer-out {
    grid-area: footer;
  }
</style>

Advanced Grid Techniques

Implicit Grids

When you place a grid item outside the explicitly defined grid, the grid container automatically creates implicit rows and columns to accommodate it. You can control the sizing of these implicit tracks using the grid-auto-rows and grid-auto-columns properties.

<div class="grid-container-implicit" style="border: 1px solid black;">
  <div class="grid-item-implicit">Item 1</div>
  <div class="grid-item-implicit">Item 2</div>
  <div class="grid-item-implicit">Item 3</div>
  <div class="grid-item-implicit item4-implicit">Item 4</div>
</div>
<style>
  .grid-container-implicit {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-auto-rows: 50px;
    grid-gap: 10px;
    padding: 10px;
  }

  .grid-item-implicit {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
  }

  .item4-implicit {
    grid-column: 1 / 3;
    grid-row: 3;
  }
</style>

<div
  class="code-output"
  style="display: flex; justify-content: center;"
>
  <div class="grid-container-implicit-out" style="border: 1px solid black;">
    <div class="grid-item-implicit-out">Item 1</div>
    <div class="grid-item-implicit-out">Item 2</div>
    <div class="grid-item-implicit-out">Item 3</div>
    <div class="grid-item-implicit-out item4-implicit-out">Item 4</div>
  </div>
</div>
<style>
  .grid-container-implicit-out {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-auto-rows: 50px;
    grid-gap: 10px;
    padding: 10px;
  }

  .grid-item-implicit-out {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
  }

  .item4-implicit-out {
    grid-column: 1 / 3;
    grid-row: 3;
  }
</style>

Minmax Function

The minmax() function allows you to set a size range greater than or equal to min and less than or equal to max.

<div class="grid-container-minmax" style="border: 1px solid black;">
  <div class="grid-item-minmax">Item 1</div>
  <div class="grid-item-minmax">Item 2</div>
  <div class="grid-item-minmax">Item 3</div>
</div>
<style>
  .grid-container-minmax {
    display: grid;
    grid-template-columns: minmax(100px, 200px) auto;
    grid-gap: 10px;
    padding: 10px;
  }

  .grid-item-minmax {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
  }
</style>

<div
  class="code-output"
  style="display: flex; justify-content: center;"
>
  <div class="grid-container-minmax-out" style="border: 1px solid black;">
    <div class="grid-item-minmax-out">Item 1</div>
    <div class="grid-item-minmax-out">Item 2</div>
    <div class="grid-item-minmax-out">Item 3</div>
  </div>
</div>
<style>
  .grid-container-minmax-out {
    display: grid;
    grid-template-columns: minmax(100px, 200px) auto;
    grid-gap: 10px;
    padding: 10px;
  }

  .grid-item-minmax-out {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
  }
</style>

Repeat Function

The repeat() function allows you to repeat a track list multiple times, making it easier to create grids with many rows or columns.

<div class="grid-container-repeat" style="border: 1px solid black;">
  <div class="grid-item-repeat">Item 1</div>
  <div class="grid-item-repeat">Item 2</div>
  <div class="grid-item-repeat">Item 3</div>
  <div class="grid-item-repeat">Item 4</div>
  <div class="grid-item-repeat">Item 5</div>
  <div class="grid-item-repeat">Item 6</div>
</div>
<style>
  .grid-container-repeat {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-gap: 10px;
    padding: 10px;
  }

  .grid-item-repeat {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
  }
</style>

<div
  class="code-output"
  style="display: flex; justify-content: center;"
>
  <div class="grid-container-repeat-out" style="border: 1px solid black;">
    <div class="grid-item-repeat-out">Item 1</div>
    <div class="grid-item-repeat-out">Item 2</div>
    <div class="grid-item-repeat-out">Item 3</div>
    <div class="grid-item-repeat-out">Item 4</div>
    <div class="grid-item-repeat-out">Item 5</div>
    <div class="grid-item-repeat-out">Item 6</div>
  </div>
</div>
<style>
  .grid-container-repeat-out {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-gap: 10px;
    padding: 10px;
  }

  .grid-item-repeat-out {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
  }
</style>

Real-World Applications of CSS Grid

CSS Grid is used in various domains, including:

• Web Layouts: Structuring entire web pages with headers, footers, sidebars, and main content areas.
• Responsive Design: Creating layouts that adapt to different screen sizes and devices.
• UI Components: Building complex UI elements like navigation menus, galleries, and dashboards.
• Magazine Layouts: Designing visually appealing and structured layouts for online magazines and blogs.
• Form Layouts: Organizing form elements in a clear and accessible manner.

Use Case Example: Creating a Responsive Website Layout

Let’s create a practical example that demonstrates how to use CSS Grid to build a responsive website layout. This example shows how to combine various CSS Grid features to create a real-world layout that adapts to different screen sizes.

<div class="grid-container-responsive">
  <header class="header-responsive">Header</header>
  <nav class="nav-responsive">Navigation</nav>
  <main class="main-responsive">Main Content</main>
  <aside class="aside-responsive">Sidebar</aside>
  <footer class="footer-responsive">Footer</footer>
</div>
<style>
  .grid-container-responsive {
    display: grid;
    grid-template-areas:
      "header header"
      "nav main"
      "nav aside"
      "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-gap: 10px;
    height: 100vh;
    padding: 10px;
  }

  .header-responsive {
    grid-area: header;
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
  }

  .nav-responsive {
    grid-area: nav;
    background-color: #2196F3;
    color: white;
    padding: 20px;
    text-align: center;
  }

  .main-responsive {
    grid-area: main;
    background-color: #f44336;
    color: white;
    padding: 20px;
    text-align: center;
  }

  .aside-responsive {
    grid-area: aside;
    background-color: #ff9800;
    color: white;
    padding: 20px;
    text-align: center;
  }

  .footer-responsive {
    grid-area: footer;
    background-color: #607d8b;
    color: white;
    padding: 20px;
    text-align: center;
  }

  /* Responsive layout for smaller screens */
  @media (max-width: 600px) {
    .grid-container-responsive {
      grid-template-areas:
        "header"
        "nav"
        "main"
        "aside"
        "footer";
      grid-template-columns: 1fr;
    }
  }
</style>

<div
  class="code-output"
  style="display: flex; justify-content: center;"
>
  <div class="grid-container-responsive-out">
    <header class="header-responsive-out">Header</header>
    <nav class="nav-responsive-out">Navigation</nav>
    <main class="main-responsive-out">Main Content</main>
    <aside class="aside-responsive-out">Sidebar</aside>
    <footer class="footer-responsive-out">Footer</footer>
  </div>
</div>
<style>
  .grid-container-responsive-out {
    display: grid;
    grid-template-areas:
      "header header"
      "nav main"
      "nav aside"
      "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-gap: 10px;
    height: 50vh;
    padding: 10px;
  }

  .header-responsive-out {
    grid-area: header;
    background-color: #4caf50;
    color: white;
    padding: 20px;
    text-align: center;
  }

  .nav-responsive-out {
    grid-area: nav;
    background-color: #2196f3;
    color: white;
    padding: 20px;
    text-align: center;
  }

  .main-responsive-out {
    grid-area: main;
    background-color: #f44336;
    color: white;
    padding: 20px;
    text-align: center;
  }

  .aside-responsive-out {
    grid-area: aside;
    background-color: #ff9800;
    color: white;
    padding: 20px;
    text-align: center;
  }

  .footer-responsive-out {
    grid-area: footer;
    background-color: #607d8b;
    color: white;
    padding: 20px;
    text-align: center;
  }

  /* Responsive layout for smaller screens */
  @media (max-width: 600px) {
    .grid-container-responsive-out {
      grid-template-areas:
        "header"
        "nav"
        "main"
        "aside"
        "footer";
      grid-template-columns: 1fr;
    }
  }
</style>

This example demonstrates several important concepts:

1. Grid Areas: Using named grid areas to define the layout.
2. Responsive Design: Using media queries to adapt the layout to different screen sizes.
3. Flexible Sizing: Using fr units to create flexible columns.
4. Consistent Styling: Applying consistent styling to all grid items for a cohesive look.

The result is a responsive website layout that can be easily customized and integrated into larger applications.

Browser Support

The CSS Grid Layout enjoys excellent support across all modern web browsers, ensuring that your creations will render consistently across various platforms.

Conclusion

The CSS grid property is an exceptionally versatile and powerful tool for web developers, providing the means to create rich, interactive, and visually engaging experiences directly within web pages.