Bryntum
Published in

Bryntum

Getting Started with CSS Container Queries — Bryntum

Why You Need Container Queries

.item { 
display: flex;
justify-content: center;
align-items: center; flex-direction: column;
}
@container (min-width: 600px) { .item { flex-direction: row; } }

Getting Started with Container Queries

.grid-container { 
display: flex;
justify-content: center;
align-items: flex-start;
}
.grid {
display: grid;
gap: 1rem;
padding: 1rem;
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 560px) {
.grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 832px) {
.grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1104px) {
.grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 1376px) {
.grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
.item { height: 16rem; width: 16rem; /* ... */ }
.grid-vertical { grid-template-columns: repeat(1, minmax(0, 1fr)); }

Implementing Container Queries

.grid-container { 
display: flex;
justify-content: center;
align-items: flex-start;
container-type: size;
}
.grid-container { /* ... */ container: size my-container; }
.grid-container { /* ... */ container-name: my-container; }
@container (min-width: 560px) { 
.grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@container (min-width: 832px) {
.grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@container (min-width: 1104px) {
.grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@container (min-width: 1376px) {
.grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@container my-container (min-width: 560px) { 
.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

Conclusion

--

--

Bryntum creates advanced Gantt project management UI components for web application development, as well as developer tools for testing and error monitoring.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mats Bryntse

Mats Bryntse

19 Followers

CEO @ Bryntum, passionate about all things web dev / JS / CSS.