CSS Grid Layout is a powerful tool for creating flexible and responsive layouts. It provides a grid-based system for arranging items on a page, making it easier to design complex layouts that adapt to different screen sizes.
Basic Structure
- Grid Container: The element that defines the grid layout.
- Grid Tracks: The lines that divide the grid into rows and columns.
- Grid Items: The elements placed within the grid.
Basic Syntax
CSS
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* Define the grid columns */
grid-template-rows: 100px 1fr; /* Define the grid rows */
}
Grid Placement
To place items within the grid, you can use the following properties:
- 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;
grid-template-rows: 100px 1fr;
}
.item {
padding: 10px;
border: 1px solid #ccc;
}
Grid Track Units
- fr: Flexible units that distribute available space proportionally.
- px: Pixels.
- em: Relative to the font size of the element.
- rem: Relative to the root element’s font size.
Key Grid Properties
- grid-template-areas: Defines named grid areas for specific items.
- grid-template-columns and grid-template-rows: Specify the number and size of grid tracks.
- grid-gap: Sets the gap between grid items.
- grid-auto-flow: Controls how items are placed in the grid.
- grid-auto-columns and grid-auto-rows: Define the default size of automatically generated tracks.
By understanding these basic concepts and properties, you can effectively use CSS Grid to create responsive and flexible layouts for your web applications.
