The grid-area property in CSS is a powerful feature used in CSS Grid Layout. It allows you to define how an element is positioned within a grid container, specifying its location and the space it occupies. grid-area can be used in two different contexts:
It combines grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties to define the item's position.
Syntax
grid-area: row-start / column-start / row-end / column-end;
1. row-start: Specifies the line where the grid item starts on the row axis.
2. column-start: Specifies the line where the grid item starts on the column axis.
3. row-end: Specifies the line where the grid item ends on the row axis.
4. column-end: Specifies the line where the grid item ends on the column axis.
Example
grid-area: 1 / 1 / 3 / 2;
The line grid-area: 1 / 1 / 3 / 2; is using the shorthand syntax for placing a grid item within a grid container. It defines the start and end lines for both rows and columns, effectively specifying where the item will be positioned within the grid.
· 1 (row-start): This specifies the grid line where the item starts on the row axis. In this case, it starts at the first row line.
· 1 (column-start): This specifies the grid line where the item starts on the column axis. Here, it starts at the first column line.
· 3 (row-end): This specifies the grid line where the item ends on the row axis. It means the item will span up to the third row line. Therefore, the item will occupy rows 1 and 2 (it spans two rows).
· 2 (column-end): This specifies the grid line where the item ends on the column axis. It means the item will span up to the second column line. Thus, the item will occupy only the first column.
grid-area.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> .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */ gap: 10px; /* Spacing between items */ height: 200px; border: 1px solid black; } .style-text{ text-align: center; padding-top: 30px; margin: 10px; font-size: 1.2em; font-weight: bold; } .item1 { background-color: lightcoral; grid-area: 1 / 1 / 3 / 2; } .item2 { background-color: lightblue; grid-column: 3 / 4; /* Starts at line 3 and ends at line 4 */ } .item3 { background-color: lightgreen; grid-column: 1 / 2; /* Starts at line 1 and ends at line 2 */ } .item4 { background-color: lightsalmon; grid-column: 2 / 4; /* Starts at line 1 and ends at line 2 */ } </style> </head> <body> <div class="grid-container"> <div class="item1 style-text">Item 1</div> <div class="item2 style-text">Item 2</div> <div class="item3 style-text">Item 3</div> <div class="item4 style-text">Item 4</div> </div> </body> </html>
Previous Next Home
No comments:
Post a Comment