1.1 Basic Principles of Grid Layout
CSS Grid Layout is a powerful tool for creating complex and responsive layouts. It provides developers with a two-dimensional grid system for placing elements, making it easier to create both simple and complex layouts. We'll cover the basic concepts and syntax of CSS Grid, without diving into specific properties.
Basic Concepts of CSS Grid
-
Grid Container and Grid Items:
-
Grid Container — This is an element that includes
display: grid. This element becomes the grid container, and all of its immediate children become Grid Items. - Grid Items — These are the immediate child elements of the Grid Container, which are placed in the grid.
-
Grid Container — This is an element that includes
-
Grid Axes:
- Inline axis and Block axis: Grid supports two axes for placing elements — the inline and block axes. By default, the inline axis runs horizontally, and the block axis runs vertically.
-
Grid Cells:
- Grid Cells — These are the basic blocks formed at the intersection of rows and columns. Each Grid Item occupies one or more cells.
-
Grid Lines:
- Grid Lines — These are the horizontal and vertical lines that divide rows and columns. They are used to place elements in relation to the grid.
-
Grid Areas:
- Grid Areas — These are named areas of the grid created by merging several cells. They allow grouping of cells and placing elements in specific areas.
1.2 Syntax Elements
Basic syntax elements of CSS Grid
1. Creating a Grid Container:
.container {
display: grid; /* or display: inline-grid */
}
2. Defining the Grid Structure:
CSS
.container {
display: grid;
grid-template-columns: 100px 200px 100px; /* Defines three columns of different widths */
grid-template-rows: 50px 100px; /* Defines two rows of different heights */
}
3. Merging Cells with grid-area:
CSS
.item1 {
grid-area: 1 / 1 / 2 / 4; /* The element spans the first row and the first three columns */
}
4. Automatic Placement of Items:
CSS
.container {
display: grid;
grid-auto-rows: minmax(100px, auto); /* Sets the minimum height of rows */
}
1.3 Examples
Simple layout with CSS Grid:
HTML
<!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: 100px 200px;
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</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 class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
Explanation:
- The .container sets up three columns, with the first and third occupying equal portions of the available space, and the second occupying twice as much.
- Two rows with fixed heights are defined.
- The gap property sets the distance between grid cells.
GO TO FULL VERSION