CSS Grid Layout

CSS Grid is a powerful layout system that allows you to create two-dimensional layouts easily and responsively. It offers a more flexible and intuitive approach compared to traditional methods like floats and tables.

What is CSS Grid?

CSS Grid is a two-dimensional layout system for web pages. It allows you to organize content into rows and columns in a flexible and responsive way, unlike older methods like floats and tables. Here are its key features:

Flexibility

  1. Define complex layouts with ease, compared to the limitations of floats and tables.
  2. Precise control over item placement and alignment within the grid.
  3. Responsive layouts that adapt to different screen sizes automatically.

Efficiency

  1. Less code needed compared to floats and tables, leading to cleaner and more maintainable code.
  2. Declarative approach lets you focus on the layout structure rather than specific pixel values.

Power

  1. Create intricate layouts with overlapping items, nesting grids, and more.
  2. Achieve complex responsive layouts with ease using media queries.

Grid Container

A grid container is the fundamental element in CSS Grid layout. It acts as the parent element that defines the grid area where content will be positioned and organized. Here's a deeper dive into the concept:

Creating a Grid Container

You transform an HTML element into a grid container by setting its display property to grid or inline-grid. This element becomes responsible for holding and arranging its child elements according to the grid layout you define.

Key Properties of a Grid Container

  1. grid-template-columns:Defines the number and size of columns in your grid. You can use values like fr (fraction of remaining space), percentages, or specific lengths.
  2. grid-template-rows:Defines the number and size of rows in your grid. Values work similarly to grid-template-columns.
  3. grid-gap:Specifies the spacing between grid items (both horizontally and vertically).
  4. grid-auto-flow:Determines how grid items are placed on lines when there's not enough space for all items on a single line.
HTML :
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
CSS:
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } .item { background-color: lightblue; padding: 10px; }
run this source code Browser View
Item 1
Item 2
Item 3

In this example, .container is the grid container. It has three equal columns defined by grid-template-columns, and grid-gap adds 10px space between items.

Full Source:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Grid Example</title> <style> .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } .item { background-color: lightblue; padding: 10px; } </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> </body> </html>

Explicit Grid

An explicit grid in CSS Grid layout refers to the predefined structure you create using specific properties to define the number and size of rows and columns. This means you explicitly tell the browser how you want the grid to be laid out, rather than relying on the browser to automatically generate it based on the content.

Key Properties

  1. grid-template-columns:Defines the number and size of columns. You can use values like fr (fraction of remaining space), percentages, or specific lengths.
  2. grid-template-rows:Defines the number and size of rows. Values work similarly to grid-template-columns.
  3. grid-template-areas (optional):Defines named areas within the grid for more precise item placement. You can then assign grid items to these named areas.
HTML :
<div class="container"> <div class="header">Header</div> <div class="main">Main content</div> <div class="sidebar">Sidebar</div> <div class="footer">Footer</div> </div>
CSS:
.container { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: auto auto auto; grid-gap: 10px; } .header { grid-area: header; } .main { grid-area: main; } .sidebar { grid-area: sidebar; } .footer { grid-area: footer; } /* Define named grid areas in CSS */ .container { grid-template-areas: "header header header" "main sidebar sidebar" "footer footer footer"; }
run this source code Browser View
Header
Main content
Sidebar
Footer

This example defines a 3-column, 3-row grid with named areas for each element.

Full Source:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Grid Example</title> <style> .container { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: auto auto auto; grid-gap: 10px; grid-template-areas: "header header header" "main sidebar sidebar" "footer footer footer"; } .header { grid-area: header; } .main { grid-area: main; } .sidebar { grid-area: sidebar; } .footer { grid-area: footer; } </style> </head> <body> <div class="container"> <div class="header">Header</div> <div class="main">Main content</div> <div class="sidebar">Sidebar</div> <div class="footer">Footer</div> </div> </body> </html>

Grid Container's Properties

Grid containers, defined by setting an element's display property to grid or inline-grid, are the foundation for laying out content in CSS Grid. These containers hold grid items (child elements) and control their positioning within the defined grid structure. Here's a breakdown of key properties:

Defining Structure

  1. grid-template-columns:Specifies the number and size of columns. Values can be fr (fractions), percentages, or specific lengths.
  2. grid-template-rows:Defines the number and size of rows. Values work similarly to grid-template-columns.
  3. grid-template-areas (optional):Allows defining named areas within the grid for precise item placement. You then assign grid items to these areas.

Spacing and Gaps

  1. grid-gap:Sets the spacing between grid items (both horizontally and vertically).
  2. row-gap and column-gap:Provide more control over spacing in specific directions.

Line Behavior

  1. grid-auto-flow:Determines how items are placed on lines when there's not enough space for all on a single line. Options include row, column, and dense.

Justifying and Aligning

  1. justify-content:Controls how items are distributed horizontally within the container.
  2. align-items:Controls how items are distributed vertically within individual rows.
  3. justify-items and align-items:Provide finer-grained control over individual grid items.

Responsiveness:

  1. Media Queries:You can use media queries to adapt the grid layout for different screen sizes by modifying container properties based on device width or other breakpoints.

Additional Properties

  1. grid-auto-columns and grid-auto-rows:Define default size and behavior for implicitly created tracks when not explicitly defined in grid-template-columns or grid-template-rows.
  2. grid-area-name:Allows assigning a grid item to a specific named area defined in grid-template-areas.
  3. place-items:Combines justify-items and align-items into a single shorthand property for convenience.
Examples:

grid-template-columns Property

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

This creates a grid container with three columns. The first column is 100 pixels wide, the second column is 200 pixels wide, and the third column takes up the remaining space.

grid-template-rows Property

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

This creates a grid container with three rows. The first row is 50 pixels tall, the second row adjusts its height based on content, and the third row takes up the remaining space.

justify-content Property

.container { display: grid; justify-content: center; }

This centers the grid items horizontally within the grid container.

justify-items Property

.container { display: grid; justify-items: center; } .item { justify-self: end; }

This centers the content of each grid item horizontally within its respective grid area. The .item class aligns each item's content to the end of its grid area.

align-content Property

.container { display: grid; align-content: space-around; }

This distributes the extra space evenly around the grid items along the block (column) axis within the grid container.

align-items Property

.container { display: grid; align-items: center; }

This centers the grid items vertically within the grid container.

Grid Item's Properties

Grid items, the child elements within a grid container, have various properties to control their placement and appearance within the defined grid structure. Here's a breakdown of key properties:

Positioning

  1. grid-column:Specifies the column(s) an item spans (e.g., grid-column: 2 / 4).
  2. grid-row:Specifies the row(s) an item spans (e.g., grid-row: 1 / 3).
  3. grid-area:Combines grid-column and grid-row into a single property for referencing named areas defined in grid-template-areas.
  4. place-self:Combines grid-column and grid-row for finer-grained placement control, including alignment options.

Alignment and Spanning

  1. justify-self:Controls horizontal alignment of the item within its assigned cell.
  2. align-self:Controls vertical alignment of the item within its assigned cell.
  3. grid-column-span:Spans the item across multiple columns.
  4. grid-row-span:Spans the item across multiple rows.

Sizing and Visibility

  1. width and height:Set the explicit width and height of the item, potentially overriding grid-defined sizes.
  2. min-width and min-height:Set minimum allowed dimensions for the item.
  3. max-width and max-height:Set maximum allowed dimensions for the item.
  4. z-index:Controls the stacking order of overlapping items (similar to traditional document flow).

Other Properties

  1. border and related properties:Control the item's borders and visual appearance.
  2. margin and padding:Add spacing around the item's content.
  3. background properties:Style the item's background.
  4. text-align and other text properties:Style the item's text content.
Examples:

justify-self Property

.item { justify-self: end; }

This aligns the content of a single grid item horizontally within its grid area to the end of the column.

align-self Property

.item { align-self: center; }

This aligns the content of a single grid item vertically within its grid area to the center of the row.

grid-column-start Property and grid-column-end Property

.item { grid-column-start: 2; grid-column-end: 4; }

This specifies that the grid item should start at the second vertical grid line and end at the fourth vertical grid line, spanning two columns.

grid-column Property

.item { grid-column: 2 / 4; }

This shorthand property combines grid-column-start and grid-column-end to specify the grid item's column placement in a single declaration.

grid-row-start Property and grid-row-end Property

.item { grid-row-start: 1; grid-row-end: 3; }

This specifies that the grid item should start at the first horizontal grid line and end at the third horizontal grid line, spanning two rows.

grid-row Property

.item { grid-row: 1 / 3; }

This shorthand property combines grid-row-start and grid-row-end to specify the grid item's row placement in a single declaration.

grid-area Property

.item { grid-area: 1 / 2 / 3 / 4; }

This shorthand property combines grid-row-start, grid-column-start, grid-row-end, and grid-column-end to specify both the row and column placement of the grid item in a single declaration.

grid-template-areas Property

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

Here's a comprehensive example that showcases various important functionalities of CSS Grid:

run this source code Browser View
Header
Sidebar
Main Content
Footer
Full Source:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Grid Example</title> <style> .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px auto 200px; grid-gap: 20px; grid-template-areas: "header header header" "sidebar main main" "footer footer footer"; } .header { grid-area: header; background-color: #333; color: #fff; padding: 20px; } .sidebar { grid-area: sidebar; background-color: #666; color: #fff; padding: 20px; } .main { grid-area: main; background-color: #ddd; padding: 20px; } .footer { grid-area: footer; background-color: #333; color: #fff; padding: 20px; } .item { background-color: lightblue; padding: 20px; border: 1px solid #ccc; text-align: center; } </style> </head> <body> <div class="container"> <div class="header item">Header</div> <div class="sidebar item">Sidebar</div> <div class="main item">Main Content</div> <div class="footer item">Footer</div> </div> </body> </html>

This example demonstrates the following key features of CSS Grid:

Grid Container Properties:
  1. display: grid;:Defines the element as a grid container.
  2. grid-template-columns:Specifies the size and number of columns.
  3. grid-template-rows:Specifies the size and number of rows.
  4. grid-gap:Sets the gap between grid items.
Grid Item Placement
  1. grid-area:Assigns a grid item to a named grid area.
  2. grid-template-areas:Defines named grid areas for the layout.
Responsive Layout
  1. Uses relative units (fr) for flexible sizing.
  2. Utilizes media queries for responsive design.
Styling Grid Items
  1. Applies styling to individual grid items.

Conclusion

CSS Grid is a powerful layout system in CSS that allows for the creation of complex web layouts with ease. It enables precise control over the arrangement and alignment of elements in rows and columns, facilitating responsive designs across various screen sizes. With features like grid containers, items, and properties like grid-template-columns and grid-template-rows, CSS Grid offers a flexible and efficient way to organize and structure web content.






Related Topics
  1. CSS Flexbox (Flexible Box) Layout
  2. Difference between CSS Grid and CSS Flexbox