Mastering CSS grid-template for Efficient Layouts

Introduction to grid-template

The grid-template property in CSS is a powerful shorthand tool for defining grid layouts. It allows web developers to specify grid columns, rows, and areas in a concise and efficient manner. This property is widely supported across modern browsers, making it a reliable choice for creating responsive and dynamic web designs.

By using grid-template, developers can easily define the structure of a grid container without the need to set multiple properties individually. This shorthand property combines grid-template-rows, grid-template-columns, and grid-template-areas, enabling the creation of complex grid layouts with minimal code.

Reasons to Use grid-template

For web developers and designers, grid-template offers a streamlined approach to grid layouts. It reduces the complexity of CSS code and enhances readability, making it easier to understand and modify grid structures. Whether you’re building a simple web page or a complex web application, grid-template provides the flexibility and control needed to create visually appealing and functional designs.

Baseline: Widely Available

The grid-template property is well-established and widely available across various devices and browser versions. It has been supported in all major browsers since July 2020, ensuring a consistent and reliable user experience. This broad compatibility makes grid-template a go-to choice for web developers aiming to create responsive and dynamic grid layouts.

grid-template Definition and Specification

The grid-template property in CSS is a shorthand property used to define grid columns, rows, and areas. It combines three separate properties into one, making it easier to create and manage grid layouts:

1. grid-template-rows: Specifies the size of the rows in the grid.
2. grid-template-columns: Specifies the size of the columns in the grid.
3. grid-template-areas: Defines named grid areas, allowing for more complex and flexible layouts.

Syntax

The syntax for grid-template is straightforward and allows for various configurations:

grid-template: none;
grid-template: [rows] / [columns];
grid-template: [areas] [rows] / [columns];
grid-template: initial | inherit | unset;

Keywords

• none: Resets the sizing of rows and columns to their default values, meaning there is no explicit grid. Named grid areas are not defined.
• [rows] / [columns]: Specifies the sizes of the rows and columns. Use auto for default sizing.
• [areas] [rows] / [columns]: Defines named grid areas along with row and column sizes.
• initial: Sets the property to its default value.
• inherit: Inherits the property from its parent element.
• unset: Resets the property to its inherited value if it is inheritable, or to its initial value if not.

Example

Here’s a simple example demonstrating the use of grid-template:

.grid-container {
  display: grid;
  grid-template:
    "header header" 50px
    "sidebar main" 1fr
    "footer footer" 50px
    / 200px 1fr;
}

In this example, the grid container is divided into three rows and two columns. The first row contains the header, the second row contains the sidebar and main content, and the third row contains the footer. The sizes of the rows and columns are specified using the grid-template property.

Constituent Properties

The grid-template property is a shorthand that combines three individual properties to define the structure of a grid layout:

1. grid-template-rows:
   • Definition: Specifies the size of the rows in the grid.
   • Syntax: grid-template-rows: [row-size] [row-size] ...;
   • Example: grid-template-rows: 50px 1fr;
     • This defines two rows: the first row is 50 pixels tall, and the second row takes up the remaining space (1fr).
2. grid-template-columns:
   • Definition: Specifies the size of the columns in the grid.
   • Syntax: grid-template-columns: [column-size] [column-size] ...;
   • Example: grid-template-columns: 200px 1fr;
     • This defines two columns: the first column is 200 pixels wide, and the second column takes up the remaining space.
3. grid-template-areas:
   • Definition: Defines named grid areas, allowing for more complex and flexible layouts.
   • Syntax:

     grid-template-areas:
       "[area-name] [area-name] ..."
       "[area-name] [area-name] ..."
       ...;

   • Example:

     grid-template-areas:
       "header header"
       "sidebar main"
       "footer footer";

     • This defines a grid layout with three rows and two columns, with named areas for “header,” “sidebar,” “main,” and “footer.”

Syntax and Examples

The grid-template property in CSS offers a flexible and efficient way to define grid layouts. This section will cover the syntax of grid-template and provide practical examples to illustrate its usage.

Syntax

The syntax for the grid-template property is designed to be versatile, allowing you to specify grid rows, columns, and areas in various ways:

grid-template: none;
grid-template: [rows] / [columns];
grid-template: [areas] [rows] / [columns];
grid-template: initial | inherit | unset;

Keywords and Values

1. none:
   • Resets the sizing of rows and columns to their default values. Named grid areas are not defined.
   • Example: grid-template: none;
2. [rows] / [columns]:
   • Specifies the sizes of the rows and columns.
   • Example: grid-template: 50px 1fr / 200px 1fr;
3. [areas] [rows] / [columns]:
   • Defines named grid areas along with row and column sizes.
   • Example:

     grid-template:
       "header header" 50px
       "sidebar main" 1fr
       "footer footer" 50px
       / 200px 1fr;

4. initial:
   • Sets the property to its default value.
   • Example: grid-template: initial;
5. inherit:
   • Inherits the property from its parent element.
   • Example: grid-template: inherit;
6. unset:
   • Resets the property to its inherited value if it is inheritable, or to its initial value if not.
   • Example: grid-template: unset;

Practical Examples

Example 1: Basic Grid Layout

This example demonstrates a simple grid layout with defined rows and columns:

.grid-container {
  display: grid;
  grid-template: 50px 1fr / 200px 1fr;
}

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Sidebar</div>
  <div class="item3">Main</div>
  <div class="item4">Footer</div>
</div>

In this example, the grid container is divided into two rows and two columns. The first row is 50 pixels tall, and the second row takes up the remaining space (1fr). The first column is 200 pixels wide, and the second column takes up the remaining space.

Example 2: Named Grid Areas

This example demonstrates a grid layout with named areas:

.grid-container {
  display: grid;
  grid-template:
    "header header" 50px
    "sidebar main" 1fr
    "footer footer" 50px
    / 200px 1fr;
}

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main</div>
  <div class="footer">Footer</div>
</div>

In this example, the grid container is divided into three rows and two columns. The named areas “header,” “sidebar,” “main,” and “footer” are defined, making the layout more flexible and easier to manage.

Values and Keywords

The grid-template property in CSS offers a range of values and keywords that allow you to define grid layouts in various ways. Understanding these values and keywords is crucial for effectively using grid-template to create flexible and responsive grid structures.

Values

1. none:
   • Resets the sizing of rows and columns to their default values. Named grid areas are not defined.
   • Example: grid-template: none;
2. [rows] / [columns]:
   • Specifies the sizes of the rows and columns.
   • Example: grid-template: 50px 1fr / 200px 1fr;
3. [areas] [rows] / [columns]:
   • Defines named grid areas along with row and column sizes.
   • Example:

     grid-template:
       "header header" 50px
       "sidebar main" 1fr
       "footer footer" 50px
       / 200px 1fr;

4. initial:
   • Sets the property to its default value.
   • Example: grid-template: initial;
5. inherit:
   • Inherits the property from its parent element.
   • Example: grid-template: inherit;
6. unset:
   • Resets the property to its inherited value if it is inheritable, or to its initial value if not.
   • Example: grid-template: unset;

Summary

The grid-template property provides a powerful and versatile way to define grid layouts in CSS. By understanding its syntax and values, you can create complex and responsive grid structures with minimal code. The examples provided illustrate how to use grid-template to define rows, columns, and named areas, making your grid layouts more efficient and maintainable.

In the following sections, we will explore practical use cases and best practices for using grid-template in web development. Stay tuned for more insights!

CSS grid-template Property

The grid-template property in CSS is a powerful tool for defining the structure of a grid container. It combines the definitions of grid-template-rows, grid-template-columns, and grid-template-areas into a single declaration, making it easier to set up your grid layout.

Values and Keywords

1. none

   • Description: Resets the sizing of rows and columns to their default values. No named grid areas are defined.
   • Usage: grid-template: none;
   • Example:

     .grid-container {
       display: grid;
       grid-template: none;
     }

2. [rows] / [columns]

   • Description: Specifies the sizes of the rows and columns. Use auto for default sizing.
   • Usage: grid-template: 50px 1fr / 200px 1fr;
   • Example:

     .grid-container {
       display: grid;
       grid-template: 50px 1fr / 200px 1fr;
     }

3. [areas] [rows] / [columns]

   • Description: Defines named grid areas along with row and column sizes.
   • Syntax:

     grid-template:
       "[area-name] [area-name] ..."
       "[area-name] [area-name] ..."
       ...
       / [columns];

   • Usage:

     grid-template:
       "header header" 50px
       "sidebar main" 1fr
       "footer footer" 50px
       / 200px 1fr;

   • Example:

     .grid-container {
       display: grid;
       grid-template:
         "header header" 50px
         "sidebar main" 1fr
         "footer footer" 50px
         / 200px 1fr;
     }

4. initial

   • Description: Sets the property to its default value.
   • Usage: grid-template: initial;
   • Example:

     .grid-container {
       display: grid;
       grid-template: initial;
     }

5. inherit

   • Description: Inherits the property from its parent element.
   • Usage: grid-template: inherit;
   • Example:

     .grid-container {
       display: grid;
       grid-template: inherit;
     }

6. unset

   • Description: Resets the property to its inherited value if it is inheritable, or to its initial value if not.
   • Usage: grid-template: unset;
   • Example:

     .grid-container {
       display: grid;
       grid-template: unset;
     }

Keywords

• none: Resets the grid to its default state, with no explicit grid defined.
• initial: Sets the property to its default value.
• inherit: Inherits the value from the parent element.
• unset: Resets the property to its inherited value if it is inheritable, or to its initial value if not.

Practical Examples

Example 1: Basic Grid Layout with none

This example demonstrates a grid layout with the none value:

.grid-container {
  display: grid;
  grid-template: none;
}

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

In this example, the grid container has no explicit grid defined, and the items will be placed implicitly.

Example 2: Grid Layout with Defined Rows and Columns

This example demonstrates a grid layout with defined rows and columns:

.grid-container {
  display: grid;
  grid-template: 50px 1fr / 200px 1fr;
}

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Sidebar</div>
  <div class="item3">Main</div>
  <div class="item4">Footer</div>
</div>

In this example, the grid container is divided into two rows and two columns. The first row is 50 pixels tall, and the second row takes up the remaining space (1fr). The first column is 200 pixels wide, and the second column takes up the remaining space.

Example 3: Grid Layout with Named Areas

This example demonstrates a grid layout with named areas:

.grid-container {
  display: grid;
  grid-template:
    "header header" 50px
    "sidebar main" 1fr
    "footer footer" 50px
    / 200px 1fr;
}

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main</div>
  <div class="footer">Footer</div>
</div>

In this example, the grid container is divided into three rows and two columns. The named areas “header,” “sidebar,” “main,” and “footer” are defined, making the layout more flexible and easier to manage.

Formal Definition and Syntax

The grid-template property in CSS is a shorthand property that combines the definitions of grid-template-rows, grid-template-columns, and grid-template-areas into a single declaration. This makes it easier to set up the structure of a grid container without needing to define each property separately.

Formal Definition

• Initial Value:
  • grid-template-columns: none
  • grid-template-rows: none
  • grid-template-areas: none
• Applies To: Grid containers
• Inherited: No
• Percentages:
  • grid-template-columns: Refers to the corresponding dimension of the content area.
  • grid-template-rows: Refers to the corresponding dimension of the content area.
• Computed Value:
  • grid-template-columns: As specified, but with relative lengths converted into absolute lengths.
  • grid-template-rows: As specified, but with relative lengths converted into absolute lengths.
  • grid-template-areas: As specified.
• Animation Type:
  • grid-template-columns: Simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list.
  • grid-template-rows: Simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list.
  • grid-template-areas: Discrete.

Formal Syntax

The formal syntax for the grid-template property is as follows:

grid-template =
  none |
  [ <'grid-template-rows'> / <'grid-template-columns'> ] |
  [ [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]? ] |
  initial | inherit | unset;

<grid-template-rows> =
  none |
  <track-list> |
  <auto-track-list> |
  subgrid <line-name-list>?;

<grid-template-columns> =
  none |
  <track-list> |
  <auto-track-list> |
  subgrid <line-name-list>?;

<line-names> =
  '[' <custom-ident>* ']';

<track-size> =
  <track-breadth> |
  minmax( <inflexible-breadth>, <track-breadth> ) |
  fit-content( <length-percentage> );

<explicit-track-list> =
  [ <line-names>? <track-size> ]+ <line-names>?;

<track-list> =
  [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?;

<auto-track-list> =
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? [ <auto-repeat> [ <line-names>? <fixed-size> ]+ <line-names>? ]*;

<track-breadth> =
  <length-percentage> |
  <flex> |
  min-content |
  max-content |
  auto;

<inflexible-breadth> =
  <length-percentage> |
  min-content |
  max-content |
  auto;

<length-percentage> =
  <length> |
  <percentage>;

<track-repeat> =
  repeat( [ <integer> ], [ <line-names>? <track-size> ]+ <line-names>? );

<fixed-size> =
  <fixed-breadth> |
  minmax( <fixed-breadth>, <track-breadth> ) |
  minmax( <inflexible-breadth>, <fixed-breadth> );

<fixed-repeat> =
  repeat( [ <integer> ], [ <line-names>? <fixed-size> ]+ <line-names>? );

<auto-repeat> =
  repeat( [ auto-fill | auto-fit ], [ <line-names>? <fixed-size> ]+ <line-names>? );

<name-repeat> =
  repeat( [ <integer> | auto-fill ], <line-names>+ );

<fixed-breadth> =
  <length-percentage>;

Key Components

• none: Resets the sizing of rows and columns to their default values. Named grid areas are not defined.
• <grid-template-rows> / <grid-template-columns>: Specifies the sizes of the rows and columns. Use auto for default sizing.
• <line-names>? <string> <track-size>? <line-names>?: Defines named grid areas along with row and column sizes.
• initial: Sets the property to its default value.
• inherit: Inherits the property from its parent element.
• unset: Resets the property to its inherited value if it is inheritable, or to its initial value if not.

Example

Here’s an example of how to use the grid-template property:

.grid-container {
  display: grid;
  grid-template:
    "header header" 50px
    "sidebar main" 1fr
    "footer footer" 50px
    / 200px 1fr;
}

In this example, the grid container is divided into three rows and two columns. The named areas “header,” “sidebar,” “main,” and “footer” are defined, making the layout more flexible and easier to manage.

Summary

The grid-template property in CSS is a powerful shorthand tool for defining the structure of a grid container. By combining grid-template-rows, grid-template-columns, and grid-template-areas, it simplifies the process of setting up grid layouts. Understanding the formal definition and syntax of grid-template is crucial for effectively using this property to create complex and responsive grid structures.

In the following sections, we will explore practical examples and use cases of grid-template, discuss its compatibility and specifications, and provide tips for using it in web development.

Simplified Guide to grid-template in CSS

Key Components

1. none:

   • Resets the grid to default sizes.
   • Usage: grid-template: none;

2. <'grid-template-rows'> / <'grid-template-columns'>:

   • Defines row and column sizes.
   • Syntax: grid-template: <grid-template-rows> / <grid-template-columns>;
   • Example: grid-template: 50px 1fr / 200px 1fr;

3. [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?:

   • Defines named grid areas with row and column sizes.
   • Syntax:

     grid-template:
       [line-names] <string> [track-size] [line-names]
       [line-names] <string> [track-size] [line-names]
       ...
       / <explicit-track-list>;

   • Example:

     grid-template:
       "header header" 50px
       "sidebar main" 1fr
       "footer footer" 50px
       / 200px 1fr;

4. initial:

   • Sets the property to its default value.
   • Usage: grid-template: initial;

5. inherit:

   • Inherits the property from its parent element.
   • Usage: grid-template: inherit;

6. unset:

   • Resets the property to its inherited value or initial value.
   • Usage: grid-template: unset;

Example

Here’s a simple example of how to use the grid-template property:

.grid-container {
  display: grid;
  grid-template:
    "header header" 50px
    "sidebar main" 1fr
    "footer footer" 50px
    / 200px 1fr;
}

In this example, the grid container is divided into three rows and two columns. The named areas “header,” “sidebar,” “main,” and “footer” are defined, making the layout more flexible and easier to manage.

Examples and Use Cases

Example 1: Basic Grid Layout

HTML:

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main</div>
  <div class="footer">Footer</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template:
    "header header" 50px
    "sidebar main" 1fr
    "footer footer" 50px
    / 200px 1fr;
}

.header, .sidebar, .main, .footer {
  background-color: lightblue;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

Explanation:

• The grid container is divided into three rows and two columns.
• The first row is 50 pixels tall and contains the “header” area.
• The second row takes up the remaining space (1fr) and contains the “sidebar” and “main” areas.
• The third row is 50 pixels tall and contains the “footer” area.
• The first column is 200 pixels wide, and the second column takes up the remaining space.

Example 2: Responsive Grid Layout

HTML:

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template:
    repeat(2, 1fr) / repeat(2, 1fr);
}

.item1, .item2, .item3, .item4 {
  background-color: lightcoral;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

@media (max-width: 600px) {
  .grid-container {
    grid-template:
      repeat(4, 1fr) / 1fr;
  }
}

Explanation:

• The grid container is divided into two rows and two columns for larger screens.
• Each item takes up an equal portion of the available space (1fr).
• For screens smaller than 600 pixels, the grid container changes to a single-column layout with four rows.

Example 3: Named Grid Areas

HTML:

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main</div>
  <div class="footer">Footer</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template:
    "header header" 50px
    "sidebar main" 1fr
    "footer footer" 50px
    / 200px 1fr;
}

.header {
  grid-area: header;
  background-color: lightblue;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.sidebar {
  grid-area: sidebar;
  background-color: lightgreen;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.main {
  grid-area: main;
  background-color: lightyellow;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.footer {
  grid-area: footer;
  background-color: lightcoral;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

Explanation:

• The grid container is divided into three rows and two columns.
• Named areas “header,” “sidebar,” “main,” and “footer” are defined, making the layout more flexible and easier to manage.
• Each named area is styled individually for better visual distinction.

Example 4: Complex Grid Layout with Named Areas

HTML:

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main</div>
  <div class="ad">Ad</div>
  <div class="footer">Footer</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template:
    "header header ad" 50px
    "sidebar main ad" 1fr
    "footer footer footer" 50px
    / 200px 1fr 100px;
}

.header {
  grid-area: header;
  background-color: lightblue;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.sidebar {
  grid-area: sidebar;
  background-color: lightgreen;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.main {
  grid-area: main;
  background-color: lightyellow;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.ad {
  grid-area: ad;
  background-color: lightpink;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.footer {
  grid-area: footer;
  background-color: lightcoral;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

Explanation:

• The grid container is divided into three rows and three columns.
• Named areas “header,” “sidebar,” “main,” “ad,” and “footer” are defined.
• The “ad” area takes up the third column in the first two rows.
• Each named area is styled individually for better visual distinction.

Specifications and Browser Compatibility

Specifications

• CSS Grid Layout Module Level 2:
  • The grid-template property is part of the CSS Grid Layout Module Level 2 specification.
  • Reference: CSS Grid Layout Module Level 2 - explicit-grid-shorthand

Browser Compatibility

The grid-template property is widely supported across all major browsers:

• Google Chrome: Supported since version 57 (March 2017).
• Mozilla Firefox: Supported since version 52 (March 2017).
• Microsoft Edge: Supported since version 16 (September 2017).
• Safari: Supported since version 10.1 (September 2016).
• Opera: Supported since version 44 (March 2017).

Browser Compatibility Table

Compatibility Notes

• Internet Explorer: The grid-template property is not supported in Internet Explorer. For projects that require support for Internet Explorer, alternative layout methods such as Flexbox or float-based layouts may be necessary.
• Mobile Browsers: The grid-template property is well-supported in modern mobile browsers, ensuring a consistent experience across devices.

Checking Browser Compatibility

To check browser compatibility, you can refer to resources like Can I Use.

Summary

The grid-template property in CSS is a powerful tool for creating responsive and dynamic grid layouts. By understanding its syntax and values, you can create complex and flexible grid structures with minimal code. The examples provided illustrate various use cases, from simple grid layouts to more complex ones with named areas and responsive designs.

In the following sections, we will discuss related properties and tips for using grid-template effectively in web development.

Checking Browser Compatibility for grid-template

To check if the grid-template property works across different browsers, you can use the Browser Compatibility Data (BCD) tables from Mozilla Developer Network (MDN). These tables give you detailed info on how well CSS properties are supported across various browser versions.

• MDN BCD Tables: grid-template Browser Compatibility

Reporting Feedback

If you find any issues or have suggestions regarding the grid-template property, you can report them through the feedback links on the MDN documentation pages. This helps improve the docs and fix any compatibility issues.

• Feedback Link: MDN Feedback

Summary

The grid-template property is a versatile and widely supported feature in CSS, defined by the CSS Grid Layout Module Level 2. It’s great for creating responsive and dynamic grid layouts. By using the BCD tables and providing feedback, you can ensure a consistent and high-quality user experience across different platforms and devices.

Using grid-template-rows

The grid-template-rows property in CSS lets you define the height of rows in a grid container. It’s part of the grid-template shorthand, making it easy to create flexible and responsive grid layouts.

Syntax

grid-template-rows: [row-size] [row-size] ...;

Values

• none: Resets row sizes to default values.
• <track-list>: Specifies row sizes using a list of track sizes.
• <auto-track-list>: Specifies row sizes using an auto-repeat track list.
• subgrid: Creates a subgrid that aligns its rows with the parent grid.

Examples

Basic Usage

HTML:

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Main</div>
  <div class="item3">Footer</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-rows: 50px 1fr 50px;
}

.item1, .item2, .item3 {
  background-color: lightblue;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

Explanation:

• The grid container has three rows.
• The first and third rows are 50 pixels tall.
• The middle row takes up the remaining space (1fr).

Using auto

HTML:

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Main</div>
  <div class="item3">Footer</div>
</div>

CSS:

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

.item1, .item2, .item3 {
  background-color: lightblue;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

Explanation:

• The grid container has three rows.
• The first and third rows adjust to the content size (auto).
• The middle row takes up the remaining space (1fr).

Using minmax

HTML:

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Main</div>
  <div class="item3">Footer</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-rows: minmax(50px, 1fr) minmax(200px, 1fr) minmax(50px, 1fr);
}

.item1, .item2, .item3 {
  background-color: lightblue;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

Explanation:

• The grid container has three rows.
• Each row has a minimum size (minmax(min-size, max-size)).
• The rows expand to fill available space but won’t shrink below the minimum size.

Using repeat

HTML:

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
}

.item1, .item2, .item3, .item4 {
  background-color: lightblue;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

Explanation:

• The grid container has four rows.
• Each row takes up an equal portion of the available space (1fr).

Summary

The grid-template-rows property in CSS is great for defining row heights in a grid container. It helps create flexible and responsive layouts with minimal code. The examples show various use cases, from basic usage to advanced configurations with minmax and repeat. Understanding grid-template-rows is key to using grid-template effectively for complex and responsive grid structures.

Using grid-template-columns

The grid-template-columns property in CSS lets you define the width of columns in a grid container. It’s part of the grid-template shorthand, making it easy to create flexible and responsive grid layouts.

Syntax

grid-template-columns: [column-size] [column-size] ...;

Values

• none: Resets column sizes to default values.
• <track-list>: Specifies column sizes using a list of track sizes.
• <auto-track-list>: Specifies column sizes using an auto-repeat track list.
• subgrid: Creates a subgrid that aligns its columns with the parent grid.

Examples

Basic Usage

HTML:

<div class="grid-container">
  <div class="item1">Sidebar</div>
  <div class="item2">Main</div>
</div>

CSS:

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

.item1, .item2 {
  background-color: lightblue;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

Explanation:

• The grid container has two columns.
• The first column is 200 pixels wide.
• The second column takes up the remaining space (1fr).

Using auto

HTML:

<div class="grid-container">
  <div class="item1">Sidebar</div>
  <div class="item2">Main</div>
</div>

CSS:

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

.item1, .item2 {
  background-color: lightblue;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

Explanation:

• The grid container has two columns.
• The first column adjusts to the content size (auto).
• The second column takes up the remaining space (1fr).

Using minmax

HTML:

<div class="grid-container">
  <div class="item1">Sidebar</div>
  <div class="item2">Main</div>
</div>

CSS:

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

.item1, .item2 {
  background-color: lightblue;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

Explanation:

• The grid container has two columns.
• Each column has a minimum size (minmax(min-size, max-size)).
• The columns expand to fill available space but won’t shrink below the minimum size.

Using repeat

HTML:

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.item1, .item2, .item3, .item4 {
  background-color: lightblue;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

Explanation:

• The grid container has four columns.
• Each column takes up an equal portion of the available space (1fr).

Summary

The grid-template-columns property in CSS is great for defining column widths in a grid container. It helps create flexible and responsive layouts with minimal code. The examples show various use cases, from basic usage to advanced configurations with minmax and repeat. Understanding grid-template-columns is key to using grid-template effectively for complex and responsive grid structures.

Using grid-template-areas

The grid-template-areas property in CSS lets you define named areas within a grid container. This is useful for creating layouts with distinct sections like headers, sidebars, main content areas, and footers.

Syntax

grid-template-areas:
  "[area-name] [area-name] ..."
  "[area-name] [area-name] ..."
  ...;

Each string represents a row, and each name within the string represents a cell in that row.

Values

• none: Resets the grid to default state with no named areas.
• [area-name]: Defines a named area in the grid. Areas can span multiple cells.

Examples

Basic Usage

HTML:

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main</div>
  <div class="footer">Footer</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-rows: 50px 1fr 50px;
  grid-template-columns: 200px 1fr;
}

.header {
  grid-area: header;
  background-color: lightblue;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.sidebar {
  grid-area: sidebar;
  background-color: lightgreen;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.main {
  grid-area: main;
  background-color: lightyellow;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.footer {
  grid-area: footer;
  background-color: lightcoral;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

Summary

The grid-template-areas property in CSS is great for defining named areas within a grid container. It helps create layouts with distinct sections and is particularly useful for complex and flexible designs. The example shows how to use grid-template-areas to create a layout with a header, sidebar, main content area, and footer.

Introduction to grid-template-areas

The grid-template-areas property in CSS Grid is a powerful tool for creating named areas within a grid container. This makes it easier to manage complex layouts by defining sections like headers, sidebars, main content areas, and footers. Here’s how you can use it effectively.

Basic Usage

HTML:

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main</div>
  <div class="footer">Footer</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-rows: 50px 1fr 50px;
  grid-template-columns: 200px 1fr;
}

.header {
  grid-area: header;
  background-color: lightblue;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.sidebar {
  grid-area: sidebar;
  background-color: lightgreen;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.main {
  grid-area: main;
  background-color: lightyellow;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.footer {
  grid-area: footer;
  background-color: lightcoral;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

Explanation:

• The grid container is divided into three rows and two columns.
• Named areas “header,” “sidebar,” “main,” and “footer” are defined.
• Each named area is styled individually for better visual distinction.

Complex Layout Example

HTML:

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main</div>
  <div class="ad">Ad</div>
  <div class="footer">Footer</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-areas:
    "header header ad"
    "sidebar main ad"
    "footer footer footer";
  grid-template-rows: 50px 1fr 50px;
  grid-template-columns: 200px 1fr 100px;
}

.header {
  grid-area: header;
  background-color: lightblue;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.sidebar {
  grid-area: sidebar;
  background-color: lightgreen;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.main {
  grid-area: main;
  background-color: lightyellow;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.ad {
  grid-area: ad;
  background-color: lightpink;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.footer {
  grid-area: footer;
  background-color: lightcoral;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

Explanation:

• The grid container is divided into three rows and three columns.
• Named areas “header,” “sidebar,” “main,” “ad,” and “footer” are defined.
• The “ad” area takes up the third column in the first two rows.
• Each named area is styled individually for better visual distinction.

Responsive Layout Example

HTML:

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main</div>
  <div class="footer">Footer</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-rows: 50px 1fr 50px;
  grid-template-columns: 200px 1fr;
}

.header {
  grid-area: header;
  background-color: lightblue;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.sidebar {
  grid-area: sidebar;
  background-color: lightgreen;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.main {
  grid-area: main;
  background-color: lightyellow;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.footer {
  grid-area: footer;
  background-color: lightcoral;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

@media (max-width: 600px) {
  .grid-container {
    grid-template-areas:
      "header"
      "sidebar"
      "main"
      "footer";
    grid-template-rows: 50px 1fr 1fr 50px;
    grid-template-columns: 1fr;
  }
}

Explanation:

• For larger screens, the grid container is divided into three rows and two columns.
• For screens smaller than 600 pixels, the grid container changes to a single-column layout with four rows.

Summary

The grid-template-areas property in CSS Grid is a powerful tool for defining named grid areas within a grid container. By using this property, you can create complex and flexible layouts with distinct sections. The examples provided illustrate various use cases, from basic usage to more advanced configurations with multiple named areas and responsive designs. Understanding the grid-template-areas property is essential for effectively using the grid-template shorthand to create complex and responsive grid structures.

Line-based Placement with CSS Grid

Line-based placement is a powerful feature of CSS Grid that allows you to place items at specific lines within the grid. This feature provides precise control over the positioning of grid items, enabling you to create complex and flexible layouts. By using line-based placement, you can specify the starting and ending lines for each grid item, both horizontally and vertically.

Key Concepts

1. Grid Lines: In a CSS Grid, lines define the boundaries of rows and columns. Each grid line is numbered, starting from 1. You can also name grid lines to make them more intuitive and easier to manage.
2. Line-based Placement Properties:
   • grid-row-start: Specifies the starting line for a grid item.
   • grid-row-end: Specifies the ending line for a grid item.
   • grid-column-start: Specifies the starting line for a grid item.
   • grid-column-end: Specifies the ending line for a grid item.
3. Shorthand Properties:
   • grid-row: Combines grid-row-start and grid-row-end.
   • grid-column: Combines grid-column-start and grid-column-end.
   • grid-area: Combines grid-row-start, grid-row-end, grid-column-start, and grid-column-end.

Syntax

The syntax for line-based placement properties is straightforward:

grid-row-start: [line-name | line-number];
grid-row-end: [line-name | line-number];
grid-column-start: [line-name | line-number];
grid-column-end: [line-name | line-number];

grid-row: [grid-row-start] / [grid-row-end];
grid-column: [grid-column-start] / [grid-column-end];
grid-area: [grid-row-start] / [grid-column-start] / [grid-row-end] / [grid-column-end];

Examples

Basic Line-based Placement

HTML:

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
}

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 3;
  background-color: lightblue;
}

.item2 {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 2;
  background-color: lightgreen;
}

.item3 {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 2;
  grid-column-end: 3;
  background-color: lightyellow;
}

.item4 {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 3;
  grid-column-end: 4;
  background-color: lightcoral;
}

Explanation:

• The grid container is divided into three rows and three columns.
• item1 spans from the first row to the third row and from the first column to the third column.
• item2, item3, and item4 each span a single row and column within the grid.

Using Shorthand Properties

HTML:

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
}

.item1 {
  grid-row: 1 / 3;
  grid-column: 1 / 3;
  background-color: lightblue;
}

.item2 {
  grid-row: 3 / 4;
  grid-column: 1 / 2;
  background-color: lightgreen;
}

.item3 {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
  background-color: lightyellow;
}

.item4 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
  background-color: lightcoral;
}

Explanation:

• The grid container is divided into three rows and three columns.
• item1 spans from the first row to the third row and from the first column to the third column using the shorthand properties grid-row and grid-column.
• item2, item3, and item4 each span a single row and column within the grid.

Named Grid Lines

HTML:

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-rows: [row1-start] 100px [row1-end row2-start] 100px [row2-end row3-start] 100px [row3-end];
  grid-template-columns: [col1-start] 100px [col1-end col2-start] 100px [col2-end col3-start] 100px [col3-end];
}

.item1 {
  grid-row-start: row1-start;
  grid-row-end: row3-end;
  grid-column-start: col1-start;
  grid-column-end: col3-end;
  background-color: lightblue;
}

.item2 {
  grid-row-start: row3-start;
  grid-row-end: row3-end;
  grid-column-start: col1-start;
  grid-column-end: col2-end;
  background-color: lightgreen;
}

.item3 {
  grid-row-start: row3-start;
  grid-row-end: row3-end;
  grid-column-start: col2-start;
  grid-column-end: col3-end;
  background-color: lightyellow;
}

.item4 {
  grid-row-start: row3-start;
  grid-row-end: row3-end;
  grid-column-start: col3-start;
  grid-column-end: col3-end;
  background-color: lightcoral;
}

Explanation:

• The grid container is divided into three rows and three columns with named grid lines.
• item1 spans from the start of the first row to the end of the third row and from the start of the first column to the end of the third column using named grid lines.
• item2, item3, and item4 each span a single row and column within the grid using named grid lines.

Summary

Line-based placement with CSS Grid is a powerful feature that provides precise control over the positioning of grid items. By using line-based placement properties, you can specify the starting and ending lines for each grid item, both horizontally and vertically. This feature enables you to create complex and flexible layouts with ease. The examples provided illustrate various use cases, from basic line-based placement to more advanced configurations with shorthand properties and named grid lines.

Grid Template Areas: Shorthand Definitions

Grid template areas allow you to define named areas within a grid container, providing a more intuitive and flexible way to manage grid layouts. By using the grid-template-areas property, you can create complex layouts with distinct sections, such as headers, sidebars, main content areas, and footers. Additionally, the grid-template shorthand property can include grid template areas, making it easier to define the entire grid structure in one declaration.

Definition and Syntax

The grid-template-areas property is used to define named grid areas within a grid container. The syntax for grid-template-areas is as follows:

grid-template-areas:
  "[area-name] [area-name] ..."
  "[area-name] [area-name] ..."
  ...;

Each string represents a row in the grid, and each name within the string represents a cell in that row.

Values

• none: Resets the grid to its default state, with no named areas defined.
• [area-name]: Defines a named area in the grid. Areas can span multiple cells.

Shorthand Definition

The grid-template shorthand property can include grid template areas, allowing you to define the entire grid structure in one declaration. The syntax is as follows:

grid-template:
  [grid-template-areas] [grid-template-rows] / [grid-template-columns];

Examples

Basic Grid Template Areas

HTML:

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main</div>
  <div class="footer">Footer</div>
</div>