eduTrain

Lesson 34 / الدرس 34

Grid 1 — rows, columns & gap / الشبكة 1 — الصفوف والأعمدة و gap

Turn any element into a grid with display: grid, size its columns and rows with grid-template-columns/grid-template-rows, the fr unit and repeat(), and space cells apart with gap.

حوّل أي عنصر إلى شبكة بخاصية display: grid، وحدد أحجام أعمدتها وصفوفها بـ grid-template-columns و grid-template-rows ووحدة fr ودالة repeat()، وباعد بين خلاياها بـ gap.

Flexbox arranges items along one line — even when it wraps, you are still thinking in one dimension at a time. Grid arranges in two dimensions at once: you lay out rows and columns together, up front, and every item simply lands into a cell. Turn any element into a grid the same way you turned one into a flex container: with one line of display. 

.gallery {
    display: grid;
    grid-template-columns: 100px 100px 100px;
}
display: grid turns the container into a grid, and grid-template-columns defines exactly three columns, 100px each. Every item lands into the next empty cell automatically, row after row.

Columns and rows: grid-template-columns and grid-template-rows

Each value in grid-template-columns creates one column track, in order — three values make three columns. grid-template-rows does the same for rows, though most of the time you let rows size themselves automatically and only fix the columns. Fixed units like px work, but the fr unit — a fraction of whatever space is left after gaps and fixed tracks are subtracted — is what you will use in almost every real grid, because it is the one unit that never causes overflow. 

.gallery {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}
Three columns sharing the same row proportionally: the middle one is twice as wide because it claims 2fr against its neighbors' 1fr each. Resize nothing — fr does the math for you.

repeat() and gap

Writing 1fr six times to make six equal columns is exactly the kind of repetition repeat() exists to remove: repeat(3, 1fr) means exactly the same as 1fr 1fr 1fr. gap works exactly as it did in Flexbox — it adds space between rows and columns only, never on the outer edge — except that in Grid it spaces in both directions at once. 

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
Six cells, three equal columns written with repeat(), and a real gap between every row and column. The fourth cell wraps onto a second row automatically — you never wrote grid-template-rows at all.
PropertyDoes what
display: gridTurns the element into a grid container
grid-template-columnsDefines the column tracks, one value per column
grid-template-rowsDefines the row tracks (often left automatic)
fr unitA share of the space left after gaps and fixed tracks
repeat(n, size)Repeats a track size n times
gapSpace between rows and columns, both directions

Every property from this lesson, side by side.

Try it live / جرّب بنفسك

Preview / المعاينة

Check yourself / اختبر نفسك

1. What does grid-template-columns: 1fr 1fr 1fr create?

2. Why is fr usually better than % for grid-template-columns once you add a gap?

3. What does repeat(4, 1fr) mean?

Your task / مهمتك

Turn the six photo thumbnails below into a real grid: three equal columns using fr, a gap between every cell, and use repeat() instead of writing 1fr three times.

حوّل الصور المصغّرة الست أدناه إلى شبكة حقيقية: ثلاثة أعمدة متساوية باستخدام fr، وفجوة بين كل خلية، واستعمل repeat() بدل كتابة 1fr ثلاث مرات.

  • The container has display: grid الحاوية بها display: grid
  • The columns use the fr unit الأعمدة تستخدم وحدة fr
  • repeat() defines the three columns repeat() تحدد الأعمدة الثلاثة
  • gap spaces the cells apart gap تباعد بين الخلايا
How do you want to submit? / كيف تريد التسليم؟