Related Topics
HTML
Data Structure
CSS
grid-template-rows: 100px 1fr auto;
grid-template-columns: The syntax forgrid-template-columnsis similar togrid-template-rows. It allows you to specify the size of each column individually or use shorthand notation to define multiple columns at once. For example:
grid-template-columns: 1fr 2fr 1fr;
Both grid-template-rows and grid-template-columns are fundamental properties in CSS Grid Layout, enabling you to establish the structure and sizing of rows and columns within a grid container. By utilizing these properties, you can create sophisticated and flexible grid-based layouts.
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
CSS:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center; /* Vertical alignment: Center */
justify-items: center; /* Horizontal alignment: Center */
height: 300px;
}
.item {
border: 1px solid black;
}
In the above example, the .container represents the grid container, and the .item represents the grid items.
By setting align-items: center and justify-items: center on the container, the grid items will be both vertically and horizontally centered within their respective grid cells.
Feel free to adjust the alignment properties (align-items and justify-items) and experiment with different values to achieve your desired alignment within the grid container.
grid-area: / / / ;
Here’s a breakdown of the values:
<grid-row-start>: The starting row line of the grid area.<grid-column-start>: The starting column line of the grid area.<grid-row-end>: The ending row line of the grid area.<grid-column-end>: The ending column line of the grid area.
The values for grid-row-start, grid-column-start, grid-row-end, and grid-column-end can be either a line number, a named grid area, or one of the keywords: span, auto, or unset.
Here’s an example to illustrate the use of grid-area:
HTML:
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
</div>
CSS:
.container {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.item {
border: 1px solid black;
padding: 10px;
}
.item-1 {
grid-area: 1 / 1 / 2 / 3; /* Starts at row 1, column 1 and spans 1 row and 2 columns */
}
.item-2 {
grid-area: 2 / 1 / 3 / 2; /* Starts at row 2, column 1 and spans 1 row and 1 column */
}
.item-3 {
grid-area: 2 / 2; /* Starts at row 2, column 2 and spans the default 1 row and 1 column */
}
.item-4 {
grid-area: 1 / 2; /* Starts at row 1, column 2 and spans the default 1 row and 1 column */
}
In this example, the .container represents the grid container, and .item represents the grid items.
By using the grid-area property on each item, we can specify the starting and ending positions of each item in terms of rows and columns. This allows us to control their placement and spanning within the grid.
For example, .item-1 uses grid-area: 1 / 1 / 2 / 3, which means it starts at row 1, column 1, and spans 1 row and 2 columns. Similarly, the other items are positioned and spanned using grid-area.
The use of grid-area simplifies the code compared to setting individual grid-row and grid-column properties for each item.
With grid-area, you can easily define the grid areas for your items, making it more concise and manageable, especially for complex grid layouts.
Popular Category
Topics for You
HTML
Data Structure
Go through our study material. Your Job is awaiting.