CSS Grid Container

Versions

Author: max fancourt

css3

General overview of the ‘CSS Grid Layout Module’

The CSS Grid Layout Module is a powerful layout system designed to offer a two-dimensional grid-based layout, both for rows and columns, making it easier to design web pages without the need for complex floats and positioning. It provides a more intuitive way to create layouts, giving developers the ability to align items into a responsive grid with minimal effort.

Key Features of CSS Grid Layout Module:

1. Two-Dimensional Layout: Unlike Flexbox, which is primarily a one-dimensional layout system, Grid Layout handles both columns and rows, allowing for more complex and versatile layouts.
2. Explicit and Implicit Grids: You can define your grid structure explicitly with grid-template-rows and grid-template-columns, or let the browser implicitly create rows and columns as needed.
3. Flexible and Responsive Design: With the ability to create flexible grid tracks, CSS Grid makes it easy to design responsive layouts that adapt to various screen sizes.
4. Alignment and Spacing: Grid Layout provides precise control over alignment, spacing, and positioning of grid items using properties like justify-items, align-items, justify-content, and align-content.
5. Grid Areas: The ability to define named grid areas simplifies the process of arranging content and makes the code more readable.

Grid Container

The grid container is the parent element that holds the grid items. To create a grid container, you apply display: grid or display: inline-grid to an element. The grid container defines the structure of the grid and controls the layout of its child elements.

Key Properties of a Grid Container:

display:

• display: grid;: Establishes a block-level grid container.
• display: inline-grid;: Establishes an inline-level grid container.

grid-template-columns:

• Defines the column structure of the grid.
• Example: grid-template-columns: 1fr 2fr; creates two columns, with the second column being twice as wide as the first.

grid-template-rows:

• Defines the row structure of the grid.
• Example: grid-template-rows: 100px auto; creates two rows, with the first row having a fixed height of 100 pixels and the second row taking up the remaining space.

grid-template-areas:

• Allows for a visual way to place items in the grid by naming areas.

Example:

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

gap:

• Defines the space between grid items.
• Example: gap: 10px; sets a 10-pixel gap between all grid items.

justify-items and align-items:

• Controls the alignment of grid items within their respective cells.
• Example: justify-items: center; centers items horizontally.

justify-content and align-content:

• Controls the alignment of the entire grid within the grid container.
• Example: justify-content: space-between; evenly distributes extra space between grid items.

grid-auto-flow:

• Controls the auto-placement algorithm for grid items that are not explicitly placed.
• Example: grid-auto-flow: row dense; places items in rows and fills in gaps as tightly as possible.

Demo

0 Comments