CSS Grid 3 Columns
User
css grid for 3 columns
Assistant
Here’s a simple CSS Grid layout for 3 columns. You can adjust the styles as needed.
### HTML:
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>### CSS:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
gap: 16px; /* space between grid items */
padding: 16px;
}
.grid-item {
background-color: #f0f0f0;
border: 1px solid #ddd;
padding: 16px;
text-align: center;
border-radius: 8px;
}### Explanation:
1. **`display: grid;`**: Defines the container as a grid.
2. **`grid-template-columns: repeat(3, 1fr);`**: Creates 3 columns, each taking up an equal fraction of the available space (`1fr`).
3. **`gap: 16px;`**: Adds spacing between rows and columns.
4. **`padding`**: Adds padding around the grid container and inside each grid item for better spacing.
This layout will adjust automatically to fit the container width and maintain 3 columns. If the container width becomes too small, you can add a media query for responsiveness.
### Responsive Example:
@media (max-width: 768px) {
.grid-container {
grid-template-columns: repeat(2, 1fr); /* Switch to 2 columns */
}
}
@media (max-width: 480px) {
.grid-container {
grid-template-columns: 1fr; /* Switch to 1 column */
}
}