Stay Ahead with the Power of Upskilling - Invest in Yourself! 
In CSS Grid Layout, grid tracks define the rows and columns of the grid. To place items within the grid, you use grid placement properties.
Basic Grid Placement
- grid-column-start and grid-column-end: Specify the starting and ending grid columns for an item.
- grid-row-start and grid-row-end: Specify the starting and ending grid rows for an item.
Example
HTML
<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;
grid-template-rows: 100px 1fr;
}
.item {
grid-column: 1 / 3; /* Span two columns */
grid-row: 2; /* Start on the second row */
}
Using Grid Areas
- grid-template-areas: Define named grid areas for specific items.
Example
CSS
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 1fr;
grid-template-areas:
“header header header”
“main main sidebar”;
}
.header {
grid-area: header;
}
.main {
grid-area: main;
}
.sidebar {
grid-area: sidebar;
}
Sizing Grid Items
- grid-column-start and grid-column-end: Use line numbers or named grid tracks to specify the size.
- grid-row-start and grid-row-end: Use line numbers or named grid tracks to specify the size.
Example
CSS
.item {
grid-column: 1 / span 2; /* Span two columns */
grid-row: 2 / 4; /* Span two rows */
}
Responsive Grid Layout
- Media queries: Use media queries to adjust grid properties based on screen size.
- Flexible grid tracks: Use fr units for grid tracks to create flexible layouts.
Example
CSS
@media only screen and (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
By understanding these concepts and techniques, you can effectively place and size grid items in your responsive web designs.
