CSS
Simple Equal-Width Column Layout with CSS Grid
Learn to quickly create a basic equal-width column layout using CSS Grid, perfect for structuring sections like features or product listings with consistent spacing and straightforward code.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Creates 3 equal-width columns */
gap: 20px; /* Defines the space between grid items */
padding: 20px;
background-color: #f8f8f8;
}
.grid-item {
background-color: #e6f7ff;
padding: 30px;
border: 1px solid #b3e0ff;
text-align: center;
font-family: sans-serif;
color: #333;
}
How it works: This snippet illustrates a fundamental CSS Grid layout. By setting `display: grid` on the parent, we establish a grid context. `grid-template-columns: repeat(3, 1fr)` creates three columns, each occupying an equal fraction (`1fr`) of the available space. The `gap` property ensures consistent spacing both horizontally and vertically between the grid items, resulting in a clean and organized layout.