Creating Layouts with CSS Grid

CSS Grid: A Powerful Layout Tool for Modern Web Design

This excerpt from Tiffany's CSS Master, 2nd Edition, provides a concise introduction to CSS Grid, a revolutionary layout system introduced in October 2017. Grid simplifies the creation of complex layouts previously requiring extensive DOM manipulation. While the specification is detailed, this overview covers key concepts and points to further resources for in-depth learning.

Key Concepts:

• CSS Grid enables the creation of intricate layouts previously challenging or impossible to achieve. It gained widespread browser support in October 2017.
• Applying display: grid to an element establishes a grid formatting context, transforming the element into a block-level container and its children into grid items arranged in rows and columns.
• The grid-template-rows and grid-template-columns properties define the number and size of rows and columns using a space-separated track list (e.g., lengths, percentages, auto, min-content, max-content).
• Implicit grids automatically handle grid items exceeding explicitly defined cells, defaulting to auto-sizing based on content.
• The grid-template shorthand combines row and column definitions. The repeat() function simplifies repeating columns or rows, while auto-fit and auto-fill dynamically adjust column/row counts.

The Grid Formatting Context:

display: grid triggers a grid formatting context with these effects:

1. The element becomes a block-level element.
2. Child elements (or text nodes) become block-like grid items.
3. In horizontal writing modes, row heights match the tallest item unless explicitly set; vertical writing modes use the longest item's length.

display: inline-grid behaves similarly, but the container remains inline-level.

Defining Grid Layouts:

After defining the grid container, specify row and column counts using grid-template-rows and grid-template-columns. These accept a track list, a space-separated string defining grid line names and sizes for each row or column position.

Explicit vs. Implicit Grids:

An explicit grid defines all cells. An implicit grid extends the grid to accommodate additional items beyond the explicitly defined cells. Implicit grid items auto-size, expanding to fit content or filling remaining space. grid-auto-rows and grid-auto-columns control default sizes for implicit grid items, but using minmax() prevents content overflow.

Flexible Grids with Flex Units (fr):

Flex units (fr) represent fractions of available space, providing proportional sizing. They are ratios, not absolute lengths, and are incompatible with other length units or calc().

grid-template Shorthand:

The grid-template property combines grid-template-rows and grid-template-columns for conciseness.

Repeating Rows and Columns (repeat()):

The repeat() function simplifies creating repeating patterns: repeat(number, track list). auto-fit and auto-fill dynamically adjust the number of repetitions based on available space. auto-fit adjusts track sizes; auto-fill adds anonymous tracks.

Further Learning:

This is a basic introduction; numerous resources offer more detailed information, including the CSS Grid specification itself, Rachel Andrew's Grid by Example, Jen Simmons' Experimental Layout Lab and Layout Land YouTube channel, and CSS-Tricks' "A Complete Guide to Grid."

Conclusion:

CSS Grid is a powerful tool. This overview provides a foundation for further exploration of its capabilities.

The above is the detailed content of Creating Layouts with CSS Grid. For more information, please follow other related articles on the PHP Chinese website!