BetaCodophile is currently in active development. Features may change rapidly! 🚀
Codophile LogoCodophile
Back to CSS

CSS Grid Layout

Master grid layouts by controlling grid templates, gaps, and item placement.

Grid Template

10px

Items Alignment (Inside Grid Area)

Content Alignment (Whole Grid)

Grid Container Preview
6 Items
1
2
3
4
5
6
Container CSS
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
gap: 10px;
justify-items: stretch;
align-items: stretch;
justify-content: start;
align-content: start;
}