Comprehensive Guide to CSS Grid Layout: Concepts, Syntax, and Practical Examples

The article introduces CSS Grid as a powerful two‑dimensional layout system, comparing it with Flexbox and highlighting issues such as uneven spacing when using justify-content: space‑between or space‑around .

It explains grid compatibility and recommends checking caniuse.com for browser support.

Container declaration – use display: grid and define rows and columns with grid-template-rows and grid-template-columns . Example:

<style>
  .box {
    margin: 50px auto;
    display: grid;
    grid-template-columns: 100px 100px 100px; /* three columns */
    grid-template-rows: 100px 100px 100px;    /* three rows */
    border: 5px solid #3333;
  }
  .box div {
    background-color: #f509f1;
    border: 1px solid #d2d0d0;
    padding: 20px;
  }
</style>

Row and column sizing – use fixed units, percentages, fr fractions, repeat() , and minmax() for flexible layouts. Example of a responsive three‑column grid:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 10px; /* row‑gap and column‑gap */
}

Gaps – row-gap , column-gap , or the shorthand gap can set spacing between tracks.

Element positioning – use grid-row-start , grid-column-start , grid-row-end , grid-column-end or their shorthand grid-row , grid-column . Example placing an item in the centre:

.center-item {
  grid-area: 2 / 2 / 3 / 3; /* row‑start / col‑start / row‑end / col‑end */
}

Naming lines and areas – name grid lines with brackets (e.g., [c-start] ) or use grid-template-areas for semantic layout definitions. Example:

grid-template-areas:
  "header header header header"
  "nav main main aside"
  "footer footer footer footer";

header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }
aside  { grid-area: aside; }
footer { grid-area: footer; }

Auto‑flow – control item placement order with grid-auto-flow: row , column , or dense to fill gaps.

Alignment – use justify-content and align-content for the whole grid, justify-items and align-items for items, and justify-self / align-self for individual elements. Shorthand properties place-content , place-items , and place-self combine these values.

Automatic placement – when items overflow the defined tracks, the grid creates implicit rows or columns. Their sizes are controlled with grid-auto-rows and grid-auto-columns .

Throughout the tutorial, numerous code snippets demonstrate each concept, making it a practical reference for front‑end developers implementing CSS Grid layouts.