Ask any question about CSS here... and get an instant response.
Post this Question & Answer:
How can I use container-based units like `cqw` and `cqh` to manage responsive spacing in a CSS grid layout? Pending Review
Asked on Dec 31, 2025
Answer
Container-based units like `cqw` (container query width) and `cqh` (container query height) allow you to create responsive designs by basing measurements on the size of a container rather than the viewport. This can be particularly useful in a CSS grid layout to maintain consistent spacing and proportions.
<!-- BEGIN COPY / PASTE -->
<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>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2cqw; /* Use container query width for spacing */
width: 80%; /* Example container width */
height: 50vh; /* Example container height */
}
.grid-item {
background-color: #f0f0f0;
padding: 1cqh; /* Use container query height for padding */
border: 1px solid #ccc;
}
</style>
<!-- END COPY / PASTE -->Additional Comment:
- `cqw` and `cqh` are relative to the container's width and height, respectively, making them ideal for responsive designs.
- These units allow for more granular control over layout adjustments as the container size changes, independent of the viewport.
- Ensure your container has a defined size for these units to work effectively.
- Browser support for container queries and their units is still evolving, so check compatibility before using them in production.
Recommended Links:
