Retour au cours

Lesson 67: Defining Columns and Rows (grid-template-columns/rows)

**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.)*

67. Defining Columns and Rows

The core of CSS Grid is defining the size and number of columns and rows using the grid-template-columns and grid-template-rows properties.

Defining Columns

List the desired width of each column, separated by a space.

css .container { display: grid;

/* Defines 3 columns: 1st is 100px wide (fixed) 2nd is 40% of the container width (fluid) 3rd is 200px wide (fixed) */ grid-template-columns: 100px 40% 200px; }

Introducing the fr Unit

The fractional unit (fr) is the most common unit in Grid. It divides the available free space into ratios.

css .container-fr { display: grid; /* Defines 3 columns: 1 unit, 2 units, 1 unit / grid-template-columns: 1fr 2fr 1fr; / The middle column will be twice as wide as the outer two columns */ }

Defining Rows

Rows are defined similarly, typically using fixed units or auto (to size based on content).

css .container-rows { grid-template-rows: 50px auto 100px; /* 1st row is 50px (header) 2nd row adjusts height to content (main content) 3rd row is 100px (footer) */ }

Autofill vs. Explicit: When you define the templates, you create an Explicit Grid. Any items that fall outside of this defined structure are placed in the Implicit Grid.