Key Grid Properties in CSS

grid-template-columns

The grid-template-columns property specifies the number and width of columns in a grid container.

Syntax:

.container {
  grid-template-columns: value;
} 

value can be defined using:

• Length (e.g., px, em, rem, etc.)
• Percentage (e.g., 100%)
• fr (fractional unit) (e.g., 1fr, 2fr)
• auto (content-based width)

Example

.container {
  display: grid;
  grid-template-columns: 100px 200px 1fr; /* Three columns: 100px, 200px, and flexible */
} 

grid-template-rows

The grid-template-rows property specifies the number and height of rows in the grid container.

Syntax

.container {
  grid-template-rows: value;
} 

value can be defined using:

• Length (e.g., px, em, rem)
• Percentage (e.g., 50%)
• fr (fractional unit) (e.g., 1fr, 2fr)
• auto (content-based height)

Example

.container {
  display: grid;
  grid-template-rows: 100px auto 1fr; /* Three rows: 100px, auto-height, flexible */
} 

grid-template-areas

The grid-template-areas property allows you to define the layout of grid items using named areas.

Syntax

 .container {
  grid-template-areas: 
    "header header"
    "sidebar content"
    "footer footer";
}

The grid-template-areas defines a layout with named regions:

• "header header": The first row contains a header that spans across two columns.
• "sidebar content": The second row has a sidebar in the first column and content in the second.
• "footer footer": The footer spans across both columns.

Example

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

.header {
  grid-area: header;
  background-color: lightblue;
}

.sidebar {
  grid-area: sidebar;
  background-color: lightgreen;
}

.content {
  grid-area: content;
  background-color: lightcoral;
}

.footer {
  grid-area: footer;
  background-color: lightyellow;
} 

grid-column and grid-row

These properties define the start and end position of a grid item along the columns and rows, respectively.

grid-column:

Specifies the starting and ending lines for a grid item along the column axis.

grid-row:

Specifies the starting and ending lines for a grid item along the row axis.

Syntax:

.item {
  grid-column: start / end;
  grid-row: start / end;
} 

• The start and end values can be numeric (e.g., 1 to 3), named lines (e.g., header), or span to make the item span across multiple rows or columns.

Example

.item {
  grid-column: 1 / 3;  /* Span from column 1 to column 3 */
  grid-row: 2 / 3;     /* Span from row 2 to row 3 */
} 

grid-gap

The grid-gap property (shorthand for grid-row-gap and grid-column-gap) sets the spacing between rows and columns within the grid container.

Syntax:

 .container {
  display: grid;
  grid-gap: 10px; /* 10px space between rows and columns */
}

• You can also specify different values for the row and column gaps.

 .container {
  display: grid;
  grid-gap: 20px 10px; /* 20px gap between rows and 10px between columns */
}