Understanding CSS Grid Layout:
- Grid Container: A grid container is an element with its display property set to grid or inline-grid. It serves as the parent element for grid items, defining the grid context in which items are placed.
- Grid Items: Grid items are the child elements inside a grid container. These items can be placed in specific grid cells, spanning multiple rows or columns, and their size can be adjusted based on grid layout properties.
- Grid Lines: Grid lines are the horizontal and vertical lines that form the grid structure. They divide the grid into rows and columns, providing reference points for placing grid items.
- Grid Tracks: Grid tracks are the spaces between grid lines, defining the rows and columns of the grid. Tracks can have fixed sizes, flexible sizes (using fractional units or auto), or content-based sizes (based on the size of grid items).
- Grid Areas: Grid areas are rectangular areas within the grid defined by combining multiple grid cells. They simplify layout creation by allowing items to occupy predefined areas.
CSS Grid Properties:
- display: Specifies the display type of the grid container (grid or inline-grid).
- grid-template-columns/grid-template-rows: Defines the size and structure of columns and rows in the grid.
- grid-template-areas: Specifies named grid areas within the grid layout.
- grid-gap: Sets the gap (space) between grid items and grid tracks.
- justify-items: Aligns grid items along the inline (row) axis within their grid area.
- align-items: Aligns grid items along the block (column) axis within their grid area.
- justify-content: Aligns grid items along the inline axis within the grid container.
- align-content: Aligns grid items along the block axis within the grid container.
- grid-column/grid-row: Specifies the placement of a grid item within the grid.
- grid-area: Assigns a grid item to a named grid area or specifies its placement and span.
Example of CSS Grid Layout:
Consider a simple example of a grid-based layout for a webpage containing a header, main content, and footer section.
<!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; /* Three columns with 1:2:1 ratio */
grid-template-rows: auto 1fr auto; /* Auto-sized header and footer, main content fills remaining space */
min-height: 100vh; /* Ensure full viewport height */
grid-gap: 20px; /* Gap between grid items */
}
header, footer {
background-color: #333;
color: #fff;
padding: 10px;
}
main {
background-color: #f4f4f4;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<header>Header</header>
<main>Main Content</main>
<footer>Footer</footer>
</div>
</body>
</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; /* Three columns with 1:2:1 ratio */
grid-template-rows: auto 1fr auto; /* Auto-sized header and footer, main content fills remaining space */
min-height: 100vh; /* Ensure full viewport height */
grid-gap: 20px; /* Gap between grid items */
}
header, footer {
background-color: #333;
color: #fff;
padding: 10px;
}
main {
background-color: #f4f4f4;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<header>Header</header>
<main>Main Content</main>
<footer>Footer</footer>
</div>
</body>
</html>
In this example:
- The .container class is a grid container with three columns (1fr 2fr 1fr) and three rows (header, main content, footer).
- Grid areas are implicitly created based on the structure of the HTML.
- The grid-gap property adds space between grid items for better visual separation.
- The layout adjusts dynamically based on content and viewport size, providing a responsive design.
Benefits of CSS Grid Layout:
- Responsive Design: CSS Grid enables responsive layouts that adapt to different screen sizes and devices, ensuring a consistent user experience.
- Two-Dimensional Layouts: Grid layout allows precise control over both rows and columns, offering flexibility in creating complex designs.
- Grid Areas: Named grid areas simplify layout creation by defining reusable areas for placing content within the grid.
- Alignment Control: Grid properties like justify-content, align-items, and align-content provide granular control over item alignment within the grid.
- Fractional Units: Using fractional units (fr) allows for flexible and proportionate sizing of grid tracks based on available space.
Practice Excercise Practice now