Retour au cours

Lesson 78: Grid Practical: Building a 12-Column System

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

78. Grid Practical: Building a 12-Column System

Most CSS frameworks (like Bootstrap) use a 12-column grid system because 12 is easily divisible by 2, 3, 4, and 6. Implementing this in native CSS Grid is straightforward.

Defining the Grid

We define 12 equal-sized fractional columns.

css .grid-12 { display: grid; /* Defines 12 equal-width columns */ grid-template-columns: repeat(12, 1fr); gap: 20px; }

Item Placement

We use the span keyword to tell items how many columns they should occupy.

html

Half Width
Half Width
Full Width

css .col-12 { /* Starts at line 1, spans 12 tracks (the entire width) */ grid-column: span 12; }

.col-6 { /* Spans 6 tracks (half the width) */ grid-column: span 6; }

.col-4 { /* Spans 4 tracks (one-third width) */ grid-column: span 4; }

Responsive Tip: We will later combine this structure with media queries to change the span amount (e.g., span 12 on mobile, span 4 on desktop).