CSS Grid Layout is a powerful two-dimensional grid-based layout system that allows you to create complex web layouts with ease. It's a module of CSS that provides developers with a method of creating grid structures for web page layouts.
Here's a breakdown of its key features:
- Grid Container: The parent element that holds all the grid items.
- Grid Items: The children of the grid container that are placed within the grid.
- Grid Lines: The horizontal and vertical lines that divide the grid into rows and columns.
- Grid Tracks: The spaces between the grid lines, fomenting the rows and columns.
- Grid Cells: The individual units of the grid formed by the intersection of a row and a column.
- Grid Area: The total space surrounded by four grid lines.
With CSS Grid Layout, you can precisely control the layout of elements on a webpage, arranging them in rows and columns. It offers a more flexible and efficient way of designing responsive layouts compared to older methods like floats or positioning.
1. Define a Grid Container:
To create a grid layout, you first need to define a grid container using the
display: grid; property.
.container {
display: grid;
}
2. Specify Grid Rows and Columns:
Define the structure of the grid by specifying the number and size of rows and columns using the
grid-template-rows and grid-template-columns properties.
.container {
display: grid;
grid-template-rows: 100px 200px; /* Define two rows, one 100px tall and one 200px tall */
grid-template-columns: 1fr 2fr; /* Define two columns, the first one occupying 1 fraction of available space, the second one occupying 2 fractions */
}
3. Place Items in the Grid:
Place items within the grid using the grid-row and grid-column properties, or shorthand
grid-area, specifying the starting and ending positions of the grid lines.
.item {
grid-row: 1 / span 2; /* Item spans 2 rows starting from row line 1 */
grid-column: 1 / 2; /* Item starts at column line 1 and ends at column line 2 */
}
4. Additional Grid Properties:
You can also use various grid properties to control the layout and behavior of grid items:
grid-gap: Specifies the gap between rows and columns.grid-template-areas: Allows you to define named grid areas and assign items to those areas.grid-auto-rowsandgrid-auto-columns: Defines the size of rows and columns that are not explicitly defined.justify-itemsandalign-items: Aligns items within grid cells horizontally and vertically.justify-contentandalign-content: Aligns the grid itself within its container horizontally and vertically.
Example:
Here's a simple example of implementing a grid layout:
HTML(index.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 Layout Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
<div class="item item4">Item 4</div>
</div>
</body>
</html>
CSS (styles.css):
.container {
display: grid;
grid-template-rows: 100px 200px; /* Two rows, one 100px tall, one 200px tall */
grid-template-columns: 1fr 2fr; /* Two columns, first one occupies 1 fraction of available space, second one occupies 2 fractions */
grid-gap: 10px; /* Gap between grid items */
}
.item {
background-color: #3498db;
color: #fff;
padding: 20px;
text-align: center;
}
.item1 {
grid-row: 1 / span 2; /* Item 1 spans 2 rows */
grid-column: 1 / 2; /* Item 1 starts at column 1 and ends at column 2 */
}
.item2 {
grid-row: 1 / 2; /* Item 2 starts at row 1 and ends at row 2 */
grid-column: 2 / 3; /* Item 2 starts at column 2 and ends at column 3 */
}
.item3 {
grid-row: 2 / 3; /* Item 3 starts at row 2 and ends at row 3 */
grid-column: 1 / span 2; /* Item 3 spans 2 columns */
}
.item4 {
grid-row: 2 / 3; /* Item 4 starts at row 2 and ends at row 3 */
grid-column: 2 / 3; /* Item 4 starts at column 2 and ends at column 3 */
}
Explanation:
- We start with a simple HTML structure containing a
.containerdiv with four.itemdivs. - In the CSS, we define the
.containeras a grid container with two rows and two columns usinggrid-template-rowsandgrid-template-columns. - Each
.itemis styled with a background color, padding, and centered text. - We use various grid properties like
grid-rowandgrid-columnto position each item within the grid. - For example,
item1spans two rows and starts at the first column and ends at the second column. - Similarly,
item2starts at the first row and ends at the second row, and so on.
Result:
The result is a grid layout with four items positioned according to the specified row and column definitions. Each item is styled with a background color, padding, and centered text. The grid layout provides a structured way to arrange and align elements on the web page, making it easier to create complex and responsive layouts.
Leave Comment