CêIT Homeسەرەکی
Glossaryفەرهەنگی زاراوەکان
Web Designدیزاینی وێب

Chapterبەش 4 · Lectureوانە 4.3

CSS Grid: Rows and Columns TogetherCSS Grid: ڕیز و ستوون پێکەوە

CSS Grid places boxes in rows and columns at once: the grid container and its tracks, the fr unit, repeat() and gap, placing items on numbered lines (line 1 is on the right in a Kurdish page), named areas and a new map for phones, the implicit grid and minmax(), auto-fit columns without media queries, alignment, subgrid, and when to choose grid or flexbox.

سندووقەکان لە ڕیز و ستووندا پێکەوە دادەنێت: و ، ، repeat() و gap، دانانی دانەکان لەسەر هێڵی ژمارەکراو (لە لاپەڕەیەکی کوردیدا هێڵی 1 لە لای ڕاستە)، ناونراو و نەخشەیەکی نوێ بۆ مۆبایل، و minmax()، ستوونی ⁦auto-fit⁩ بێ ، ، و کەی grid یان هەڵبژێریت.

20 min read18 خولەک خوێندنەوە · 16 stepsهەنگاو

What you will learnچی فێر دەبیت

  • Make a grid container and size its tracks with grid-template-columns and -rows, fr, repeat(), minmax() and gap.
  • Place items on numbered lines and in named areas, in English and in Kurdish (right-to-left) pages.
  • Build card grids that fit any screen with repeat(auto-fit, minmax(…, 1fr)), and explain the implicit grid.
  • Align items and whole grids, line up nested cards with subgrid, and choose between grid and flexbox.
  • دروست بکەیت و قەبارەی ڕێچکەکانی بە grid-template-columns و -rows، fr، repeat()، minmax() و gap دیاری بکەیت.
  • دانەکان لەسەر هێڵی ژمارەکراو و لە ناوچەی ناونراودا دابنێیت، لە لاپەڕەی ئینگلیزی و کوردیدا ().
  • gridـی دروست بکەیت کە بە repeat(auto-fit, minmax(…, 1fr)) لەگەڵ هەر شاشەیەکدا بگونجێت و ڕوون بکەیتەوە.
  • دانەکان و هەموو grid ڕێک بخەیت، ناوەکییەکان بە subgrid ڕێک بکەیت و لە نێوان grid و هەڵبژێریت.

Grid: rows and columns togetherCSS Grid: ڕیز و ستوون پێکەوە

lines boxes up in one direction. works in two at once. display: grid on a parent makes it a , and its direct children become . grid-template-columns lists the columns. The unit fr means "one share of the free space": 1fr 1fr 1fr (or repeat(3, 1fr)) is three equal columns, and 200px 1fr is a 200px column plus one that takes the rest. gap sets the space between the rows and the columns.

سندووقەکان بە یەک ئاڕاستە ڕیز دەکات. بە دوو ئاڕاستە پێکەوە کار دەکات. display: grid لەسەر باوانێک دەیکات بە و منداڵە ڕاستەوخۆکانی دەبنە . grid-template-columns ستوونەکان دەنووسێت. یەکەی fr واتە «بەشێک لە بۆشاییە بەتاڵەکە»: 1fr 1fr 1fr (یان repeat(3, 1fr)) سێ ستوونی یەکسانە و 200px 1fr ستوونێکی ⁦200px⁩ و ستوونێکە کە باقییەکەی دەگرێت. gap بۆشایی نێوان ڕیز و ستوونەکان دیاری دەکات.

The picture names the parts you will meet in this lesson: numbered , (whole columns or rows), and .

وێنەکە ئەو بەشانە ناو دەبات کە لەم وانەیەدا دەیانبینیت: ژمارەکراو، (ستوون یان ڕیزی تەواو)، و .

A grid of three columns and three rows with 20 px gaps, drawn with dashed blue lines numbered 1 to 4 across the top and down the left side. One cell at the top left is green and labelled cell: one row × one column. The whole middle column is blue and labelled track: a whole column or row. The right column of the two lower rows is orange and labelled area: a rectangle of cells. The hatched stripes between the tracks are labelled gap. Below: grid-template-columns: repeat(3, 1fr); gap: 20px;gridـێک بە سێ ستوون و سێ ڕیز و gapـی 20px، بە هێڵی شینی پچڕپچڕ کێشراوە کە لە سەرەوە و لە لای چەپەوە لە 1 تا 4 ژمارە کراون. خانەیەک لە سەرەوەی چەپ سەوزە و ناوی خانەی gridـە: یەک ڕیز × یەک ستوون. هەموو ستوونی ناوەڕاست شینە و ناوی ڕێچکەی gridـە: ستوونێکی تەواو یان ڕیزێک. ستوونی ڕاستی دوو ڕیزەکەی خوارەوە پرتەقاڵییە و ناوی ناوچەی gridـە: لاکێشەیەک لە خانەکان. هێڵە لارەکانی نێوان ڕێچکەکان ناویان gapـە. لە خوارەوە: grid-template-columns: repeat(3, 1fr); gap: 20px;
The parts of a grid: lines, tracks, cells, areas and gaps.بەشەکانی grid: هێڵ، ڕێچکە، خانە، ناوچە و gap.CêIT
Equal columns and a menu columnستوونی یەکسان و ستوونێکی مێنیوgrid.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Grid</title>
  <style>
    body { font-family: Arial, sans-serif; }
    .gallery {
      display: grid;
      grid-template-columns: repeat(3, 1fr);   /* three equal columns */
      gap: 12px;
      margin-bottom: 16px;
    }
    .gallery div { padding: 16px; background-color: #eaf1fb; text-align: center; }
    .two-col {
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 12px;
    }
    .two-col nav  { background-color: #fdf3e1; padding: 8px; }
    .two-col main { background-color: #dcefeb; padding: 8px; }
  </style>
</head>
<body>
  <div class="gallery">
    <div>1</div><div>2</div><div>3</div>
    <div>4</div><div>5</div><div>6</div>
  </div>
  <div class="two-col">
    <nav>Menu: 200 px</nav>
    <main>Content: 1fr, the rest of the width</main>
  </div>
</body>
</html>
CSS 3 Kurdish Course Grid Part #1/3 - 22Code Land · Kurdish (Sorani)کوردی (سۆرانی) · 2.1K viewsبینین · 71 likesلایک · Partبەشی 0:00–15:40 (ofلە 16:35)

In Sorani Kurdish, part 1 of 3 on CSS Grid: rows and columns on a diagram, then a grid built in code.

بە کوردیی سۆرانی، بەشی 1 لە 3: — ڕیز و ستوون لەسەر وێنەیەک، پاشان grid بە کۆد دروست دەکرێت.

In Sorani, plays 0:00–15:40 (2020; grid has not changed since).

بە سۆرانی، لە ⁦0:00⁩ تا ⁦15:40⁩ پەخش دەبێت (ساڵی ⁦2020⁩؛ grid لەو کاتەوە نەگۆڕاوە).

Tracks and the fr unitڕێچکەکانی grid و یەکەی fr

Each value of grid-template-columns makes one column, which is a ; grid-template-rows does the same for rows, though you often leave rows out and let them grow with their content. A track can be a length (200px, 15rem, 30%), auto (as wide as its content needs) or a share of the free space in the .

هەر grid-template-columns ستوونێک دروست دەکات، کە ؛ grid-template-rows هەمان کار بۆ ڕیزەکان دەکات، هەرچەندە زۆرجار ڕیزەکان نانووسیت و دەهێڵیت لەگەڵ ناوەڕۆکەکەیاندا گەورە ببن. ڕێچکەیەک دەتوانێت درێژییەک بێت (200px، 15rem، 30%)، auto (بەقەد ئەوەی ناوەڕۆکەکەی پێویستی پێیەتی) یان بەشێک لە بۆشاییە بەتاڵەکە بە .

fr shares the free space: the browser first takes the fixed tracks and the gaps, then divides what is left. repeat(4, 1fr) writes four equal tracks, and repeat(2, 100px 1fr) repeats a pattern of two.

fr بۆشاییە بەتاڵەکە بەش دەکات: سەرەتا ڕێچکە جێگیرەکان و gapـەکان دەبات، پاشان ئەوەی دەمێنێتەوە دابەش دەکات. repeat(4, 1fr) چوار ڕێچکەی یەکسان دەنووسێت و repeat(2, 100px 1fr) نەخشەیەکی دوو ڕێچکەیی دووپاتە دەکاتەوە.

Three steps for grid-template-columns: 1fr 2fr 1fr; gap: 20px;. 1: the container is 920 px wide. 2: the two 20 px gaps are taken first, leaving 880 px of free space. 3: 1 + 2 + 1 = 4 shares, so 1fr = 220 px; the columns are 220 px, 440 px and 220 px.سێ هەنگاو بۆ grid-template-columns: 1fr 2fr 1fr; gap: 20px;. 1: کۆنتەینەرەکە 920px پانە. 2: سەرەتا هەردوو gapـی 20px دەبرێن و 880px بۆشایی بەتاڵ دەمێنێتەوە. 3: 1 + 2 + 1 = 4 بەش، بۆیە 1fr = 220px؛ ستوونەکان 220px، 440px و 220pxـن.
Gaps first, then the free space is cut into shares.یەکەم gapـەکان، پاشان بۆشاییە بەتاڵەکە دەکرێت بە بەش.CêIT
Three columns: 1fr 2fr 1frسێ ستوون: ⁦1fr 2fr 1fr⁩news.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tracks and fr</title>
  <style>
    * { box-sizing: border-box; }
    body { font-family: Arial, sans-serif; }
    .news {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;   /* 1 share, 2 shares, 1 share */
      gap: 20px;                            /* the gaps are taken first */
      max-width: 920px;
    }
    .news section { padding: 10px; background-color: #eaf1fb; }
    .news h2 { margin: 0 0 6px; font-size: 1rem; }
    .news p { margin: 0; }
  </style>
</head>
<body>
  <h1>Today</h1>
  <div class="news">
    <section><h2>Latest</h2><p>Short news.</p></section>
    <section><h2>Main story</h2><p>The middle column gets two shares of the free space.</p></section>
    <section><h2>Weather</h2><p>Erbil 31°</p></section>
  </div>
</body>
</html>

Placing items on grid linesدانانی دانەکان لەسەر هێڵەکانی grid

The lines between the tracks are numbered from 1, so four columns have five column lines. grid-column: 1 / 3 stretches an item from line 1 to line 3: two columns. grid-row: 2 / 4 does the same for rows. span 2 means "two tracks wide, wherever it lands", and -1 is the last line of the , so grid-column: 1 / -1 is the full width.

ئەو هێڵانەی نێوان ڕێچکەکان لە 1ـەوە ژمارە دەکرێن، بۆیە چوار ستوون پێنج هێڵی ستوونییان هەیە. grid-column: 1 / 3 دانەیەک لە هێڵی 1ـەوە تا هێڵی 3 درێژ دەکاتەوە: دوو ستوون. grid-row: 2 / 4 هەمان کار بۆ ڕیزەکان دەکات. span 2 واتە «بە پانیی دوو ڕێچکە، لە هەر شوێنێک دابنرێت»، هەروەها -1 دوایین هێڵی ، بۆیە grid-column: 1 / -1 هەموو پانییەکەیە.

Items you do not place fill the next free cells by themselves (auto-placement). Items placed on the same cells overlap (z-index).

ئەو دانانەی شوێنیان بۆ دیاری ناکەیت، خۆیان خانە بەتاڵەکانی دواتر پڕ دەکەنەوە (دانانی خۆکار). ئەو دانانەی لەسەر هەمان خانەکان دادەنرێن دەکەونە سەر یەک (⁦z-index⁩).

Lines in a car parkهێڵەکانی پارکینگ

Think of a car park with numbered lines painted on the ground. A car stops between line 2 and line 3. A minibus needs two bays, so it stops between line 1 and line 3 — that is grid-column: 1 / 3, or span 2. Cars that arrive without a plan simply take the next free bay.

بیر لە پارکینگێک بکەرەوە کە هێڵی ژمارەکراوی لەسەر زەوی کێشراوە. ئۆتۆمبێلێک لە نێوان هێڵی 2 و هێڵی 3ـدا ڕادەوەستێت. مینیبەسێک دوو شوێنی پێویستە، بۆیە لە نێوان هێڵی 1 و هێڵی 3ـدا ڕادەوەستێت — ئەمە grid-column: 1 / 3ـە، یان span 2. ئەو ئۆتۆمبێلانەی بێ پلان دێن، یەکەم شوێنی بەتاڵ دەگرن.

Where the analogy stops workingسنووری ئەم نموونەیە

A car park keeps its numbers; in a Kurdish page the grid counts its lines from the right.

پارکینگ ژمارەکانی خۆی دەپارێزێت؛ لە لاپەڕەیەکی کوردیدا grid هێڵەکانی لە ڕاستەوە دەژمێرێت.

Animation in five steps on a grid of four columns and three rows, with the column lines numbered 1 to 5 and the row lines 1 to 4. Step 1: the empty grid. Step 2: .top { grid-column: 1 / -1; } fills the first row from line 1 to the last line. Step 3: .big { grid-column: 1 / 3; grid-row: 2 / 4; } fills two columns and two rows at the left. Step 4: .side { grid-column: span 2; } takes the first free place two columns wide, at the right of the second row. Step 5: a and b, which have no placement, fill the last two free cells.
Animation in five steps on a grid of four columns and three rows, with the column lines numbered 1 to 5 and the row lines 1 to 4. Step 1: the empty grid. Step 2: .top { grid-column: 1 / -1; } fills the first row from line 1 to the last line. Step 3: .big { grid-column: 1 / 3; grid-row: 2 / 4; } fills two columns and two rows at the left. Step 4: .side { grid-column: span 2; } takes the first free place two columns wide, at the right of the second row. Step 5: a and b, which have no placement, fill the last two free cells.
Place some items on lines; the rest fill the free cells.هەندێک دانە لەسەر هێڵەکان دابنێ؛ ئەوانی تر خانە بەتاڵەکان پڕ دەکەنەوە.CêIT
Placing items on linesدانانی دانەکان لەسەر هێڵەکانpaper.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Placing items on lines</title>
  <style>
    body { font-family: Arial, sans-serif; }
    .paper {
      display: grid;
      grid-template-columns: repeat(4, 1fr);   /* 4 columns = 5 column lines */
      grid-template-rows: repeat(3, 70px);      /* 3 rows = 4 row lines */
      gap: 8px;
    }
    .paper div { padding: 6px; background-color: #eaf1fb; border: 1px solid #2b5ea8; }
    .top  { grid-column: 1 / -1; }              /* line 1 to the last line */
    .big  { grid-column: 1 / 3; grid-row: 2 / 4; }
    .side { grid-column: span 2; }              /* two columns, wherever it fits */
  </style>
</head>
<body>
  <div class="paper">
    <div class="top">top</div>
    <div class="big">big</div>
    <div class="side">side</div>
    <div>a</div>
    <div>b</div>
  </div>
</body>
</html>

Placing items on grid linesدانانی دانەکان لەسەر هێڵەکانی grid

Lines in a Kurdish page: line 1 is on the rightهێڵەکانی grid لە لاپەڕەیەکی کوردیدا: هێڵی 1 لە لای ڕاستە

Grid lines follow the writing direction. In a page with dir="rtl", column line 1 is on the right, so grid-column: 1 / 3 puts an item at the right, and the items without a place fill each row from right to left. Rows still count from the top. You change nothing in the CSS: the whole layout mirrors by itself.

شوێن ئاڕاستەی نووسین دەکەون. لە لاپەڕەیەکدا کە dir="rtl"ـی هەیە، هێڵی ستوونیی 1 لە لای ڕاستە، بۆیە grid-column: 1 / 3 دانەیەک لە لای ڕاست دادەنێت و ئەو دانانەی شوێنیان بۆ دیاری نەکراوە هەر ڕیزێک لە ڕاستەوە بۆ چەپ پڕ دەکەنەوە. ڕیزەکان هێشتا لە سەرەوە دەژمێردرێن. لە هیچ ناگۆڕیت: هەموو خۆی پێچەوانە دەبێتەوە.

Named areas mirror too: "nav main aside" puts nav on the right in Kurdish. Around the grid, avoid left and right and use logical properties such as margin-inline-start (Layouts in Kurdish).

ناونراویش پێچەوانە دەبنەوە: "nav main aside" لە کوردیدا nav لە لای ڕاست دادەنێت. لە دەوروبەری gridـەکەدا left و right بەکار مەهێنە و وەک margin-inline-start بەکاربهێنە (ڕێکخستنی لاپەڕە بە کوردی).

The same four-column grid twice, with .big { grid-column: 1 / 3; }. English page, dir="ltr": the column lines are numbered 1 to 5 from left to right, and .big covers the two left columns. Kurdish page, dir="rtl": the lines are numbered 1 to 5 from right to left, and .big covers the two right columns.هەمان gridـی چوار ستوونی دوو جار، بە .big { grid-column: 1 / 3; }. لاپەڕەی ئینگلیزی، dir="ltr": هێڵە ستوونییەکان لە چەپەوە بۆ ڕاست لە 1 تا 5 ژمارە کراون و .big دوو ستوونی چەپ دەگرێتەوە. لاپەڕەی کوردی، dir="rtl": هێڵەکان لە ڕاستەوە بۆ چەپ لە 1 تا 5 ژمارە کراون و .big دوو ستوونی ڕاست دەگرێتەوە.
The same CSS: in a Kurdish page the columns are counted from the right.هەمان CSS: لە لاپەڕەیەکی کوردیدا ستوونەکان لە ڕاستەوە دەژمێردرێن.CêIT
The placing example in a Kurdish pageنموونەی دانانەکە لە لاپەڕەیەکی کوردیداrojname.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<!DOCTYPE html>
<html lang="ckb" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ڕۆژنامە</title>
  <style>
    body { font-family: Tahoma, Arial, sans-serif; }
    .paper {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 70px);
      gap: 8px;
    }
    .paper div { padding: 6px; background-color: #eaf1fb; border: 1px solid #2b5ea8; }
    .top  { grid-column: 1 / -1; }
    .big  { grid-column: 1 / 3; grid-row: 2 / 4; }   /* the same CSS: now on the right */
    .side { grid-column: span 2; }
  </style>
</head>
<body>
  <div class="paper">
    <div class="top">سەرەوە</div>
    <div class="big">هەواڵی گەورە</div>
    <div class="side">لاتەنیشت</div>
    <div>ئ</div>
    <div>ب</div>
  </div>
</body>
</html>

Placing items on grid linesدانانی دانەکان لەسەر هێڵەکانی grid

See the lines in the developer toolsبینینی هێڵەکان لە ئامرازەکانی گەشەپێدەردا

  1. Open the developer tools (F12, or right-click → Inspect) and find the grid container in the Elements panel (See the box model in the browser).

    بکەرەوە (⁦F12⁩، یان کرتەی ڕاست ← Inspect) و لە پانێڵی Elementsـدا بدۆزەرەوە (بینینی مۆدێلی سندووق لە تۆڕگەڕدا).

  2. Click the small grid badge next to it. The browser draws the tracks, hatches the gaps and numbers the lines: from the start (1, 2, 3…) and from the end (-1, -2…).

    کرتە لەسەر نیشانە بچووکەکەی grid بکە کە لە تەنیشتیەتی. ڕێچکەکان دەکێشێت، gapـەکان هێڵکاری دەکات و هێڵەکان ژمارە دەکات: لە سەرەتاوە (⁦1⁩، 2، ⁦3⁩…) و لە کۆتاییەوە (-1، -2…).

  3. In the Layout pane you can also show track sizes and area names, and outline several grids at once.

    لە پانێڵی Layoutـدا دەتوانیت قەبارەی ڕێچکەکان و ناوی ناوچەکانیش پیشان بدەیت و چەند gridـێک پێکەوە دیار بکەیت.

The grid overlay: positive numbers from the start, negative from the end.ڕووپۆشی grid: ژمارەی ئەرێنی لە سەرەتاوە، نەرێنی لە کۆتاییەوە.CêIT

The three-column page, rebuilt with grid areasلاپەڕە سێ ستوونییەکە، بە ناوچەکانی grid دووپاتە دروستکراو

Now the three-column float page again (A three-column page with floats). This time the parts are the meaning-based elements from The modern way — header, nav, main, aside, footer — and the layout is drawn as a little map with grid-template-areas. Each child names its area with grid-area. No floats, no clear, no fixed heights: the three columns are always the same height, and the middle one takes all the free width.

ئێستا دووپاتە لاپەڕە سێ ستوونییە floatـییەکە (لاپەڕەیەکی سێ ستوونی بە float). ئەمجارە بەشەکان ئەو واتادارانەن کە لە ڕێگە نوێیەکە هاتوون — header، nav، main، aside، footer — و وەک نەخشەیەکی بچووک بە grid-template-areas دەکێشرێت. هەر منداڵێک ناوچەکەی خۆی بە grid-area ناو دەبات. بێ float، بێ clear، بێ بەرزیی جێگیر: سێ ستوونەکە هەمیشە هاوبەرزن و ستوونی ناوەڕاست هەموو پانییە بەتاڵەکە دەگرێت.

The same page with grid areasهەمان لاپەڕە بە ناوچەکانی gridlayout-grid.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Grid layout</title>
  <style>
    * { box-sizing: border-box; }
    body { font-family: Arial, sans-serif; margin: 8px; }
    h1, h2 { margin: 0; }
    h2 { font-size: 1rem; }
    .page {
      display: grid;
      grid-template-columns: 150px 1fr 150px;
      grid-template-areas:
        "header header header"
        "nav    main   aside"
        "footer footer footer";
      gap: 8px;
    }
    header { grid-area: header; background-color: #b5dcb3; padding: 8px; }
    nav    { grid-area: nav;    background-color: #aaaaaa; padding: 8px; }
    main   { grid-area: main;   background-color: #eeeeee; padding: 8px; min-height: 200px; }
    aside  { grid-area: aside;  background-color: #aaaaaa; padding: 8px; }
    footer { grid-area: footer; background-color: #b5dcb3; text-align: center; }
  </style>
</head>
<body>
  <div class="page">
    <header><h1>This is Web Page</h1></header>
    <nav>
      <h2>Main Menu</h2>
      <ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li>PHP</li><li>MySQL</li></ul>
    </nav>
    <main><p>Department of Information Technology</p></main>
    <aside>
      <h2>Second Stage</h2>
      <ul><li>Web Design</li><li>Network</li><li>Database</li></ul>
    </aside>
    <footer><p>Copyright &copy; 2017 IT Dept</p></footer>
  </div>
</body>
</html>
  • Every row of the map has the same number of cells.
  • An area must be a rectangle; repeat its name to make it bigger.
  • A . leaves a cell empty.
  • Break one of these rules and the whole grid-template-areas declaration is ignored.
  • In a Kurdish page the map is read from the right: the first name is the right-hand column.
  • هەموو ڕیزێکی نەخشەکە هەمان ژمارەی خانەی هەیە.
  • ناوچەیەک دەبێت لاکێشە بێت؛ ناوەکەی دووپاتە بکەرەوە تا گەورەتر ببێت.
  • . خانەیەک بەتاڵ دەهێڵێتەوە.
  • ئەگەر یەکێک لەم ڕێسایانە بشکێنیت، هەموو grid-template-areas پشتگوێ دەخرێت.
  • لە لاپەڕەیەکی کوردیدا نەخشەکە لە ڕاستەوە دەخوێنرێتەوە: یەکەم ناو ستوونی لای ڕاستە.
Two drawings of the same page. Left, the float version: a header, a 100 px left menu, a 350 px content box, a 100 px right menu and a footer; the columns have fixed widths and a white gap opens between the content and the right menu. Right, the grid version: dashed grid lines divide the page into three columns, 150px, 1fr and 150px, and three rows; the areas are labelled header, nav, main, aside and footer, with no gap problem.دوو وێنەی هەمان لاپەڕە. چەپ، وەشانی float: سەرپەڕە، مێنیوێکی چەپی 100px، سندووقێکی ناوەڕۆکی 350px، مێنیوێکی ڕاستی 100px و ژێرپەڕە؛ ستوونەکان پانیی جێگیریان هەیە و کەلێنێکی سپی لە نێوان ناوەڕۆک و مێنیوی ڕاستدا دەکرێتەوە. ڕاست، وەشانی grid: هێڵی پچڕپچڕی grid لاپەڕەکە دابەش دەکەن بۆ سێ ستوونی 150px، 1fr و 150px لەگەڵ سێ ڕیز؛ ناوچەکانی grid ناویان header، nav، main، aside و footerـە، بێ کێشەی کەلێن.
Before and after: floats with fixed widths, and grid areas that fill the width.پێش و دوای: float بە پانیی جێگیر، لەگەڵ کە پانییەکە پڕ دەکەنەوە.CêIT

The three-column page, rebuilt with grid areasلاپەڕە سێ ستوونییەکە، بە ناوچەکانی grid دووپاتە دروستکراو

A new map for phonesنەخشەیەکی نوێ بۆ مۆبایل

Because the layout is a map in the CSS, a can swap it for another map. Phones get one column; from 700px wide the three columns come back. The HTML does not change (One media query).

لەبەر ئەوەی نەخشەیەکە لەناو ، دەتوانێت بیگۆڕێت بە نەخشەیەکی تر. مۆبایل یەک ستوون وەردەگرێت؛ لە پانیی ⁦700px⁩ـەوە سێ ستوونەکە دەگەڕێنەوە. ناگۆڕێت (یەک پرسی میدیا).

Mobile first: one map for phones, one for wider screensمۆبایل لە پێشدا: نەخشەیەک بۆ مۆبایل، نەخشەیەک بۆ شاشەی پانترlayout.cssCSSRuns in the browserلە ناو تۆڕگەڕ کار دەکات
.page {
  display: grid;
  gap: 8px;
  grid-template-areas:          /* phones: one column */
    "header"
    "nav"
    "main"
    "aside"
    "footer";
}
@media (min-width: 700px) {
  .page {
    grid-template-columns: 150px 1fr 150px;
    grid-template-areas:
      "header header header"
      "nav    main   aside"
      "footer footer footer";
  }
}

Keep the HTML in a sensible reading order — header, menu, main text, side box, footer. The map only moves boxes on the screen; screen readers and the Tab key still follow the HTML, as with order in flexbox (Changing the order).

بە ڕیزبەندییەکی ژیرانەی خوێندنەوە بهێڵەوە — ، ، دەقی سەرەکی، سندووقی لاتەنیشت، . نەخشەکە تەنیا سندووقەکان لەسەر شاشە دەجووڵێنێت؛ و Tab هێشتا شوێن دەکەون، هەر وەک order لە (گۆڕینی ڕیزبەندی).

Left, a phone with the parts of the page in one column: header, nav, main, aside and footer, next to the map "header" "nav" "main" "aside" "footer". An arrow labelled @media (min-width: 700px) leads to a laptop with three columns: header across the top, nav, main and aside in the middle, footer across the bottom, and the map "header header header" "nav main aside" "footer footer footer".لای چەپ، مۆبایلێک بە بەشەکانی لاپەڕە لە یەک ستووندا: header، nav، main، aside و footer، لە تەنیشت نەخشەی "header" "nav" "main" "aside" "footer". تیرێک بە ناوی @media (min-width: 700px) دەچێت بۆ لاپتۆپێک بە سێ ستوون: header بە درێژایی سەرەوە، nav، main و aside لە ناوەڕاست، footer بە درێژایی خوارەوە و نەخشەی "header header header" "nav main aside" "footer footer footer".
Same HTML, two maps: the media query decides which one is used.هەمان HTML، دوو نەخشە: بڕیار دەدات کامیان بەکار بێت.CêIT

Extra rows by themselves: the implicit gridڕیزی زیادە بە خۆیان: gridـی خۆکار

The tracks you write with grid-template-columns and grid-template-rows form the . When there are more items than cells, the browser adds rows by itself: the . Those rows are auto sized, as tall as their content, unless you size them with grid-auto-rows.

ئەو ڕێچکانەی بە grid-template-columns و grid-template-rows دەیاننووسیت پێکدەهێنن. کاتێک دانەکان لە خانەکان زیاترن، خۆی ڕیز زیاد دەکات: . ئەو ڕیزانە قەبارەیان autoـە، بەقەد ناوەڕۆکەکەیان بەرزن، مەگەر بە grid-auto-rows قەبارەیان بۆ دابنێیت.

minmax(min, max) gives a track a range: grid-auto-rows: minmax(50px, auto) makes every extra row at least 50px tall, and taller when a long caption needs it. With grid-auto-flow: column the extra tracks become columns instead. grid-auto-flow: dense fills earlier holes with later items, but that changes the visual order, so the reading-order rule applies here too.

minmax(min, max) مەودایەک دەداتە ڕێچکەیەک: grid-auto-rows: minmax(50px, auto) وا دەکات هەموو ڕیزێکی زیادە لانیکەم ⁦50px⁩ بەرز بێت و کاتێک دەقێکی درێژ پێویستی پێی بێت، بەرزتر ببێت. بە grid-auto-flow: column ڕێچکە زیادەکان لەبری ڕیز دەبنە ستوون. grid-auto-flow: dense کونە پێشووەکان بە دانەکانی دواتر پڕ دەکاتەوە، بەڵام ئەمە ڕیزبەندیی بینراو دەگۆڕێت، بۆیە ڕێسای ڕیزبەندیی خوێندنەوە لێرەشدا ڕاستە.

A grid of three columns with seven items. The first row, items 1 to 3, is the explicit grid, written with grid-template-rows: 90px. The second and third rows, items 4 to 7, are implicit rows that the browser added, sized with grid-auto-rows: minmax(50px, auto); the second row is taller because item 6 has a long caption. The row lines are numbered 1 to 4, and line −1 is marked next to line 2: the end of the explicit grid, not the last row.gridـێک بە سێ ستوون و حەوت دانە. ڕیزی یەکەم، دانەکانی 1 تا 3، gridـی دیاریکراوە و بە grid-template-rows: 90px نووسراوە. ڕیزی دووەم و سێیەم، دانەکانی 4 تا 7، ڕیزی خۆکارن کە تۆڕگەڕ زیادی کردوون و قەبارەیان بە grid-auto-rows: minmax(50px, auto)ـە؛ ڕیزی دووەم بەرزترە چونکە دانەی 6 دەقێکی درێژی هەیە. هێڵە ئاسۆییەکان لە 1 تا 4 ژمارە کراون و هێڵی −1 لە تەنیشت هێڵی 2 نیشانە کراوە: کۆتایی gridـی دیاریکراو، نەک دوایین ڕیز.
Explicit rows are the ones you write; implicit rows appear when more items arrive.ڕیزە دیاریکراوەکان ئەوانەن کە خۆت دەیاننووسیت؛ ڕیزە خۆکارەکان کاتێک دانەی زیاتر دێت دەردەکەون.CêIT
One explicit row, more rows by themselvesیەک ڕیزی دیاریکراو، ڕیزی زیاتر بە خۆیانphotos.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The implicit grid</title>
  <style>
    body { font-family: Arial, sans-serif; }
    .photos {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 90px;              /* explicit: one row */
      grid-auto-rows: minmax(50px, auto);    /* implicit rows: 50px or more */
      gap: 8px;
    }
    .photos div { padding: 6px; background-color: #dcefeb; }
  </style>
</head>
<body>
  <div class="photos">
    <div>1</div><div>2</div><div>3</div>
    <div>4</div><div>5</div>
    <div>6: a long caption makes this implicit row taller than 50px, because minmax(50px, auto) lets it grow</div>
    <div>7</div>
  </div>
</body>
</html>

As many columns as fit: repeat(auto-fit, minmax())هێندەی جێگە هەبێت ستوون: ⁦repeat(auto-fit, minmax())⁩

repeat(auto-fit, minmax(200px, 1fr)) asks for as many columns as fit, each at least 200px wide. The free width is then shared, so the columns end up a little wider than 200px. As the screen widens, columns appear one by one — a responsive gallery without a single media query.

repeat(auto-fit, minmax(200px, 1fr)) داوای هێندە ستوون دەکات کە جێگەیان دەبێتەوە، هەریەکەیان لانیکەم ⁦200px⁩ پان. پاشان پانییە بەتاڵەکە بەش دەکرێت، بۆیە ستوونەکان کەمێک لە ⁦200px⁩ پانتر دەبن. کاتێک شاشەکە پانتر دەبێت، ستوونەکان یەک لە دوای یەک دەردەکەون — ڕێسپۆنسیڤ بێ تاکە .

Animation in four steps of repeat(auto-fit, minmax(200px, 1fr)) with four cards — Erbil, Sulaimani, Duhok and Halabja — in a container that gets wider. At 340 px there is room for one column of 340 px. At 560 px, two columns of 274 px. At 780 px, three columns of 252 px, and the fourth card moves to a new row. At 860 px, four columns of 206 px: no media query was needed.
Animation in four steps of repeat(auto-fit, minmax(200px, 1fr)) with four cards — Erbil, Sulaimani, Duhok and Halabja — in a container that gets wider. At 340 px there is room for one column of 340 px. At 560 px, two columns of 274 px. At 780 px, three columns of 252 px, and the fourth card moves to a new row. At 860 px, four columns of 206 px: no media query was needed.
Columns appear by themselves as the screen gets wider.کاتێک شاشەکە پانتر دەبێت، ستوونەکان خۆیان دەردەکەون.CêIT
A card grid that fits any screengridـێکی کارت کە لەگەڵ هەر شاشەیەکدا دەگونجێتcards.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>auto-fit</title>
  <style>
    * { box-sizing: border-box; }
    body { font-family: Arial, sans-serif; }
    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 16px;
    }
    .card { padding: 12px; border: 1px solid #d3cfc6; border-radius: 10px; }
    .card h2 { margin: 0 0 4px; font-size: 1.05rem; }
    .card p { margin: 0; }
  </style>
</head>
<body>
  <h1>Places to visit</h1>
  <div class="cards">
    <article class="card"><h2>Erbil</h2><p>Citadel tours</p></article>
    <article class="card"><h2>Sulaimani</h2><p>Book bazaar</p></article>
    <article class="card"><h2>Duhok</h2><p>Mountain walks</p></article>
    <article class="card"><h2>Halabja</h2><p>Spring flowers</p></article>
  </div>
</body>
</html>

As many columns as fit: repeat(auto-fit, minmax())هێندەی جێگە هەبێت ستوون: ⁦repeat(auto-fit, minmax())⁩

auto-fill or auto-fit?⁦auto-fill⁩ یان ⁦auto-fit⁩؟

The two words differ only when there are fewer items than columns that fit. auto-fill keeps the empty columns, so the items stay narrow and line up with a full row below. auto-fit collapses the empty columns to 0, so the items stretch across the whole width. When the grid is full, both look the same.

ئەم دوو وشەیە تەنیا ئەو کاتە جیاوازن کە دانەکان لەو ستوونانە کەمترن کە جێگەیان دەبێتەوە. auto-fill ستوونە بەتاڵەکان دەهێڵێتەوە، بۆیە دانەکان تەسک دەمێننەوە و لەگەڵ ڕیزێکی پڕی خوارەوەدا ڕێک دەبن. auto-fit ستوونە بەتاڵەکان دەکات بە 0، بۆیە دانەکان بە هەموو پانییەکەدا درێژ دەبنەوە. کاتێک gridـەکە پڕە، هەردووکیان وەک یەکن.

Two grids, each 640 px wide with two items and minmax(120px, 1fr). auto-fill: items 1 and 2 are about 122 px wide and three empty dashed columns follow. auto-fit: the empty columns collapse and items 1 and 2 are each 316 px wide.دوو grid، هەریەکەیان 640px پان بە دوو دانە و minmax(120px, 1fr). auto-fill: دانەکانی 1 و 2 نزیکەی 122px پانن و سێ ستوونی بەتاڵی پچڕپچڕ بە دوایاندا دێن. auto-fit: ستوونە بەتاڵەکان دادەخرێن و دانەکانی 1 و 2 هەریەکەیان 316px پانن.
Few items: auto-fill keeps empty columns, auto-fit lets the items stretch.دانەی کەم: auto-fill ستوونی بەتاڵ دەهێڵێتەوە، auto-fit ڕێگە دەدات دانەکان درێژ ببنەوە.CêIT
The two keywords side by sideهەردوو وشە کلیلەییەکە لە تەنیشت یەکfill-fit.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>auto-fill or auto-fit</title>
  <style>
    body { font-family: Arial, sans-serif; }
    .fill, .fit { display: grid; gap: 8px; margin-bottom: 12px; padding: 6px; background-color: #f3f1ec; }
    .fill { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .fit  { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
    .fill div, .fit div { padding: 8px; background-color: #f3ecfb; border: 1px solid #7a3db8; }
  </style>
</head>
<body>
  <p>auto-fill: the empty columns stay</p>
  <div class="fill"><div>1</div><div>2</div></div>
  <p>auto-fit: the empty columns collapse</p>
  <div class="fit"><div>1</div><div>2</div></div>
</body>
</html>

Aligning in grid: justify, align and placeڕێکخستنی شوێن لە gridـدا: justify، align و place

Grid aligns in two directions. Properties that start with justify- work along the row, the : left to right in English, right to left in Kurdish. Properties that start with align- work down the column, the .

grid بە دوو ئاڕاستە ڕێک دەخات. ئەو بە justify- دەست پێدەکەن بە درێژایی ڕیز کار دەکەن، واتە : لە چەپەوە بۆ ڕاست لە ئینگلیزیدا، لە ڕاستەوە بۆ چەپ لە کوردیدا. ئەوانەی بە align- دەست پێدەکەن بە درێژایی ستوون کار دەکەن، واتە .

  • justify-items and align-items: where every item sits inside its cell. The default stretch fills the cell; start, center and end shrink the item to its content.
  • place-items: center sets both at once: the shortest way to centre something in a box.
  • justify-self and align-self: the same, for one item.
  • justify-content and align-content: where the whole grid sits when its tracks are smaller than the container, for example fixed 70px columns.
  • justify-items و align-items: شوێنی هەموو دانەیەک لەناو خانەکەیدا. stretchـی بنەڕەت خانەکە پڕ دەکاتەوە؛ start، center و end دانەکە بچووک دەکەنەوە بۆ قەبارەی ناوەڕۆکەکەی.
  • place-items: center هەردووکیان پێکەوە دادەنێت: ئاسانترین ڕێگە بۆ ناوەڕاستکردنی شتێک لەناو سندووقێکدا.
  • justify-self و align-self: هەمان شت، بۆ یەک دانە.
  • justify-content و align-content: شوێنی هەموو gridـەکە کاتێک ڕێچکەکانی لە کۆنتەینەرەکە بچووکترن، بۆ نموونە ستوونی جێگیری ⁦70px⁩.
Four small grids. stretch, the default: the items fill their cells. place-items: center: every item is small and in the middle of its dashed cell. justify-self: end: one orange item sits at the end and top of its cell while the others stretch. justify-content: center: a grid of narrow fixed columns sits in the middle of a wider container, with hatched free space on both sides. Above: justify-* works along the row (inline axis), align-* down the column (block axis).چوار gridـی بچووک. stretch، بنەڕەت: دانەکان خانەکانیان پڕ دەکەنەوە. place-items: center: هەموو دانەیەک بچووکە و لە ناوەڕاستی خانە پچڕپچڕەکەیدایە. justify-self: end: دانەیەکی پرتەقاڵی لە کۆتایی و سەرەوەی خانەکەیدایە و ئەوانی تر خانەکانیان پڕ دەکەنەوە. justify-content: center: gridـێک بە ستوونی تەسکی جێگیر لە ناوەڕاستی کۆنتەینەرێکی پانتردایە، بە بۆشایی بەتاڵی هێڵکاری لە هەردوو لا. لە سەرەوە: justify-* بە درێژایی ڕیز (تەوەرەی ناودێڕ)، align-* بە درێژایی ستوون (تەوەرەی بلۆک).
Items in their cells, one item alone, or the whole grid in its container.دانەکان لەناو خانەکانیاندا، یەک دانە بە تەنیا، یان هەموو gridـەکە لەناو کۆنتەینەرەکەیدا.CêIT
place-items, justify-content and justify-self⁦place-items⁩، ⁦justify-content⁩ و ⁦justify-self⁩align.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Alignment in grid</title>
  <style>
    body { font-family: Arial, sans-serif; }
    .hero {
      display: grid;
      place-items: center;          /* centre in both directions */
      height: 110px;
      margin-bottom: 12px;
      background-color: #eaf1fb;
    }
    .board {
      display: grid;
      grid-template-columns: repeat(3, 70px);
      grid-auto-rows: 70px;
      gap: 6px;
      justify-content: center;      /* the whole grid in the middle */
      padding: 6px;
      background-color: #f3f1ec;
    }
    .board div { background-color: #dcefeb; }
    .board .dot {
      justify-self: end;            /* one item: at the end of its cell */
      align-self: start;            /* and at the top */
      width: 24px;
      height: 24px;
      background-color: #b4530f;
    }
  </style>
</head>
<body>
  <div class="hero"><p>Centred with place-items</p></div>
  <div class="board">
    <div></div><div class="dot"></div><div></div>
    <div></div><div></div><div></div>
  </div>
</body>
</html>

Lining up nested grids: subgridڕێککردنی gridـی ناوەکی: subgrid

A grid item can be a grid container itself, but its tracks are then independent. In a row of cards, each card sizes its own title, text and link, so the links end up at different heights. fixes this: the card spans three rows of the parent (grid-row: span 3) and says grid-template-rows: subgrid. Its title, text and link then sit in the parent's rows, which are as tall as the tallest title and text in that row.

دەتوانێت خۆی بێت، بەڵام ئەوکات ڕێچکەکانی سەربەخۆن. لە ڕیزێک ، هەر قەبارەی ناونیشان، دەق و خۆی دیاری دەکات، بۆیە لە بەرزیی جیاوازدا دەوەستن. ئەمە چاک دەکات: سێ ڕیزی باوانەکە دەگرێت (grid-row: span 3) و دەڵێت grid-template-rows: subgrid. ئیتر ناونیشان، دەق و لەناو ڕیزەکانی باواندا دادەنیشن، کە بەقەد بەرزترین ناونیشان و دەقی ئەو ڕیزە بەرزن.

A subgrid takes the parent's gap (you can override it), and its own line numbers start again from 1. Subgrid works in Chrome, Edge, Firefox and Safari since September 2023 ( widely available since March 2026).

gapـی باوانەکە وەردەگرێت (دەتوانیت بیگۆڕیت) و ژمارەی خۆی دووپاتە لە 1ـەوە دەست پێدەکات. لە ئەیلوولی ⁦2023⁩ـەوە لە Chrome، Edge، Firefox و Safariـدا کار دەکات (، لە ئازاری ⁦2026⁩ـەوە بە فراوانی بەردەست).

Before and after, three cards each. Left, each card is its own grid: the titles have one or two lines and the texts different lengths, so the texts and the links start at different heights. Right, with subgrid: dashed lines across all three cards show shared rows, and every title, text and link starts at the same height. Below: .card { display: grid; grid-row: span 3; grid-template-rows: subgrid; }پێش و دوای، هەریەکەیان سێ کارت. لای چەپ، هەر کارتێک gridـی خۆیەتی: ناونیشانەکان یەک یان دوو دێڕن و دەقەکان درێژیی جیاوازیان هەیە، بۆیە دەق و بەستەرەکان لە بەرزیی جیاوازەوە دەست پێدەکەن. لای ڕاست، بە subgrid: هێڵی پچڕپچڕ بە هەر سێ کارتەکەدا ڕیزە هاوبەشەکان پیشان دەدەن و هەموو ناونیشان، دەق و بەستەرێک لە هەمان بەرزییەوە دەست پێدەکات. لە خوارەوە: .card { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
With subgrid, nested cards share one set of rows.بە ، ناوەکییەکان یەک کۆمەڵە ڕیز بەش دەکەن.CêIT
Cards that line up with subgridکارت کە بە subgrid ڕێک دەبنmenu-cards.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Subgrid</title>
  <style>
    * { box-sizing: border-box; }
    body { font-family: Arial, sans-serif; }
    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 16px;
    }
    .card {
      display: grid;
      grid-row: span 3;               /* title, text, link: three rows */
      grid-template-rows: subgrid;    /* use the rows of .cards */
      gap: 8px;
      padding: 12px;
      border: 1px solid #d3cfc6;
      border-radius: 10px;
    }
    .card h2 { margin: 0; font-size: 1.05rem; }
    .card p { margin: 0; }
  </style>
</head>
<body>
  <h1>Our menu</h1>
  <div class="cards">
    <article class="card">
      <h2>Tea</h2>
      <p>Black tea in a small glass.</p>
      <a href="#tea">Order tea</a>
    </article>
    <article class="card">
      <h2>Coffee with cardamom and milk</h2>
      <p>Strong coffee.</p>
      <a href="#coffee">Order coffee</a>
    </article>
    <article class="card">
      <h2>Kulicha</h2>
      <p>Date cookies, baked fresh every morning in our own oven.</p>
      <a href="#kulicha">Order kulicha</a>
    </article>
  </div>
</body>
</html>

Grid or flexbox?grid یان Flexbox؟

Ask two questions. Do you control the layout by row or by column? Use flexbox: a menu, a toolbar, a row of buttons, items whose size comes from their content. Do you need rows and columns to line up? Use grid: a page, a gallery, a dashboard, a form with its labels in one column.

دوو پرسیار بکە. ئایا بە ڕیز یان بە ستوون کۆنترۆڵ دەکەیت؟ بەکاربهێنە: ، ، ڕیزێک ، دانە کە قەبارەیان لە ناوەڕۆکەکەیانەوە دێت. ئایا پێویستت بەوەیە ڕیز و ستوون پێکەوە ڕێک بن؟ grid بەکاربهێنە: لاپەڕەیەک، ، ، کە لە یەک ستووندان.

  • Flexbox works from the content out: each wrapped line shares its own space.
  • Grid works from the layout in: you draw the tracks, then put the items in them.
  • Most pages use both: grid for the page, flexbox inside the header, the menu and the cards.
  • لە ناوەڕۆکەوە بەرەو دەرەوە کار دەکات: هەر دێڕێکی نوێ بۆشایی خۆی بەش دەکات.
  • grid لە بەرەو ناوەوە کار دەکات: ڕێچکەکان دەکێشیت، پاشان دانەکانیان تێدا دادەنێیت.
  • زۆربەی لاپەڕەکان هەردووکیان بەکار دەهێنن: grid بۆ لاپەڕەکە، لەناو ، و .
Top left, flexbox: five items wrapped onto two lines; the second line's items are wider and do not line up with the first line. Top right, grid: five items in three columns, with dashed column lines, and the columns line up from row to row. Below: a page that uses both — a grid with nav and main, and a header that is a flex row of menu links.سەرەوە لای چەپ، Flexbox: پێنج دانە لەسەر دوو دێڕ؛ دانەکانی دێڕی دووەم پانترن و لەگەڵ دێڕی یەکەمدا ڕێک نابن. سەرەوە لای ڕاست، grid: پێنج دانە لە سێ ستووندا، بە هێڵی ستوونیی پچڕپچڕ و ستوونەکان لە ڕیزێکەوە بۆ ڕیزێکی تر ڕێک دەبن. لە خوارەوە: لاپەڕەیەک کە هەردووکیان بەکار دەهێنێت — gridـێک بە nav و main و سەرپەڕەیەک کە ڕیزێکی flexـە لە بەستەرەکانی مێنیو.
One direction: flexbox. Rows and columns together: grid. Usually both.یەک ئاڕاستە: . ڕیز و ستوون پێکەوە: grid. زۆرجار هەردووکیان.CêIT
Grid for the page, flexbox for the menugrid بۆ لاپەڕەکە، Flexbox بۆ مێنیوەکەboth.cssCSSRuns in the browserلە ناو تۆڕگەڕ کار دەکات
.page { display: grid; grid-template-columns: 220px 1fr; gap: 16px; }   /* two directions: the page */
.menu { display: flex; flex-wrap: wrap; gap: 8px; }                     /* one direction: the menu */

Common mistakesهەڵە باوەکان

MistakeهەڵەWhat happensچی ڕوودەداتFixچارەسەر
Rows of grid-template-areas with different cell counts, or an L-shaped areaژمارەی جیاوازی خانە لە ڕیزەکانی grid-template-areas، یان ناوچەیەکی L شێوەThe whole declaration is ignoredهەموو پشتگوێ دەخرێتThe same number of cells in every row; rectangles onlyهەمان ژمارەی خانە لە هەموو ڕیزێکدا؛ تەنیا لاکێشە
A typo in a grid-area nameهەڵەی نووسین لە ناوی grid-areaThe item drops into the next free cellدانەکە دەکەوێتە خانەی بەتاڵی دواترCheck the names in the grid overlayناوی ناوچەکان لە ڕووپۆشی gridـدا بپشکنە
Counting columns, not lines: grid-column: 1 / 2 for two columnsژماردنی ستوون لەبری هێڵ: grid-column: 1 / 2 بۆ دوو ستوونThe item covers one columnدانەکە یەک ستوون دەگرێتەوەnn columns need lines 1 to n+1n + 1: 1 / 3nn ستوون هێڵی 1 تا n+1n + 1ـیان پێویستە: 1 / 3
-1 to reach the last implicit row-1 بۆ گەیشتن بە دوایین ڕیزی خۆکارIt stops at the end of the explicit gridلە کۆتایی دەوەستێتWrite the rows in grid-template-rows, or use spanڕیزەکان لە grid-template-rowsـدا بنووسە، یان span بەکاربهێنە
A long word, URL or <pre> in a 1fr columnوشە، URL یان <pre>ـێکی درێژ لە ستوونێکی 1frـداThe column grows and the page scrolls sidewaysستوونەکە گەورە دەبێت و لاپەڕەکە بە ئاسۆیی دەجووڵێتminmax(0, 1fr) instead of 1frminmax(0, 1fr) لەبری 1fr
Fixed columns such as repeat(4, 250px)ستوونی جێگیری وەک repeat(4, 250px)Too wide for phonesبۆ مۆبایل زۆر پانەrepeat(auto-fit, minmax(…, 1fr)) or a media queryrepeat(auto-fit, minmax(…, 1fr)) یان
Areas, order or dense to change the reading orderناوچە، order یان dense بۆ گۆڕینی ڕیزبەندیی خوێندنەوەScreen readers and Tab still follow the HTML و Tab هێشتا شوێن HTML دەکەونChange the HTML orderڕیزبەندیی HTMLـەکە بگۆڕە

Why minmax(0, 1fr)? 1fr means minmax(auto, 1fr); like a flex item (When an item will not shrink), the column never gets narrower than its longest word. minmax(0, 1fr) removes that minimum; overflow-wrap: break-word then breaks the word.

بۆچی minmax(0, 1fr)؟ 1fr واتە minmax(auto, 1fr): وەک (کاتێک دانەیەک بچووک نابێتەوە)، ستوونەکە هەرگیز لە درێژترین وشەکەی تەسکتر نابێت. minmax(0, 1fr) ئەم کەمترینە لادەبات و پاشان overflow-wrap: break-word وشەکە دەشکێنێت.

Exercisesڕاهێنانەکان

ExerciseڕاهێنانA gallery that fits any screenپێشانگایەک کە لەگەڵ هەر شاشەیەکدا دەگونجێت

A photo gallery should show as many 200 px (or wider) columns as fit: four on a big screen, two on a tablet, one on a phone — without writing any media query.

وێنە دەبێت هێندە ستوونی ⁦200px⁩ (یان پانتر) پیشان بدات کە جێگەیان دەبێتەوە: چوار لەسەر شاشەی گەورە، دوو لەسەر ، یەک لەسەر مۆبایل — بێ نووسینی هیچ .

Show answerوەڵامەکە پیشان بدە
gallery.cssCSSRuns in the browserلە ناو تۆڕگەڕ کار دەکات
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.gallery img {
  max-width: 100%;
  height: auto;
}

repeat(auto-fit, minmax(200px, 1fr)) makes as many columns of at least 200 px as fit, and shares the rest of the width among them. Grid decides the number of columns by itself.

repeat(auto-fit, minmax(200px, 1fr)) ئەوەندە ستوونی لانیکەم ⁦200px⁩ دروست دەکات کە جێگەیان دەبێتەوە و باقیی پانییەکە بەسەریاندا دابەش دەکات. grid خۆی ژمارەی ستوونەکان دیاری دەکات.

ExerciseڕاهێنانA 12-column pageلاپەڕەیەکی ⁦12⁩ ستوونی

Many design systems use 12 columns. Build a page on repeat(12, 1fr): a header and a footer across all 12 columns, a menu 3 columns wide beside a main text 9 columns wide, and three cards of 4 columns each below them. Use span, not line numbers, so the page still works when you move a part.

زۆرێک لە ⁦12⁩ ستوون بەکار دەهێنن. لاپەڕەیەک لەسەر repeat(12, 1fr) دروست بکە: و بە درێژایی هەر ⁦12⁩ ستوونەکە، بە پانیی 3 ستوون لە تەنیشت دەقێکی سەرەکی بە پانیی 9 ستوون و سێ لە ژێریاندا کە هەریەکەیان 4 ستوونە. span بەکاربهێنە، نەک ژمارەی هێڵ، بۆ ئەوەی کاتێک بەشێک دەجووڵێنیت لاپەڕەکە هەر کار بکات.

Hintئاماژە

Use header, footer { grid-column: 1 / -1; }.

header, footer { grid-column: 1 / -1; } بەکاربهێنە.

Show answerوەڵامەکە پیشان بدە
A page on twelve columnsلاپەڕەیەک لەسەر دوازدە ستوونtwelve.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A 12-column page</title>
  <style>
    * { box-sizing: border-box; }
    body { font-family: Arial, sans-serif; }
    .page { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; }
    .page > * { margin: 0; padding: 8px; background-color: #eaf1fb; }
    header, footer { grid-column: 1 / -1; }   /* all 12 columns */
    nav  { grid-column: span 3; }
    main { grid-column: span 9; }
    .card { grid-column: span 4; background-color: #dcefeb; }
    h1 { margin: 0; font-size: 1.2rem; }
  </style>
</head>
<body>
  <div class="page">
    <header><h1>Hana's travel blog</h1></header>
    <nav>Menu</nav>
    <main>Main text</main>
    <div class="card">Erbil</div>
    <div class="card">Duhok</div>
    <div class="card">Halabja</div>
    <footer>Footer</footer>
  </div>
</body>
</html>

3+9=123 + 9 = 12 fills the second row and 4+4+4=124 + 4 + 4 = 12 the third, so auto-placement puts every part in the right row.

3+9=123 + 9 = 12 ڕیزی دووەم پڕ دەکاتەوە و 4+4+4=124 + 4 + 4 = 12 ڕیزی سێیەم، بۆیە دانانی خۆکار هەموو بەشێک لە ڕیزی دروستدا دادەنێت.

ExerciseڕاهێنانA dashboard with named areasداشبۆردێک بە ناوچەی ناونراو

Build the dashboard in the picture with grid-template-areas: a top bar across the page; a side menu 150px wide down the left; sales and users boxes side by side; a chart under them. Then say what one change makes it a single column on phones.

ئەو لە وێنەکەدایە بە grid-template-areas دروست بکە: شریتێکی سەرەوە بە درێژایی لاپەڕەکە؛ لاتەنیشتی ⁦150px⁩ بە درێژایی لای چەپ؛ سندووقی sales و users لە تەنیشت یەک؛ لە ژێریاندا. پاشان بڵێ کام گۆڕانکاری وای لێدەکات لەسەر مۆبایل ببێتە یەک ستوون.

The dashboard to build: a green top bar across the page; a grey side column 150 px wide on the left; two blue boxes, sales and users, side by side in two 1fr columns; an orange chart under them, across both 1fr columns.ئەو داشبۆردەی دەبێت دروستی بکەیت: شریتێکی سەوزی سەرەوە بە درێژایی لاپەڕەکە؛ ستوونێکی خۆڵەمێشیی لاتەنیشت بە پانیی 150px لە لای چەپ؛ دوو سندووقی شین، sales و users، لە تەنیشت یەک لە دوو ستوونی 1frـدا؛ هێڵکارییەکی پرتەقاڵی لە ژێریاندا بە درێژایی هەردوو ستوونی 1fr.
Target: top, side, sales, users and chart.ئامانج: top، side، sales، users و chart.CêIT
Show answerوەڵامەکە پیشان بدە
The dashboard with grid areasداشبۆرد بە ناوچەکانی griddashboard.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dashboard</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 8px; font-family: Arial, sans-serif; }
    .dash {
      display: grid;
      grid-template-columns: 150px 1fr 1fr;
      grid-template-rows: auto 1fr 1fr;
      grid-template-areas:
        "top  top   top"
        "side sales users"
        "side chart chart";
      gap: 10px;
      min-height: 320px;
    }
    .dash > * { margin: 0; padding: 10px; border-radius: 8px; background-color: #eaf1fb; }
    .top   { grid-area: top; background-color: #0d6b62; color: white; }
    .side  { grid-area: side; background-color: #f3f1ec; }
    .sales { grid-area: sales; }
    .users { grid-area: users; }
    .chart { grid-area: chart; background-color: #fdf3e1; }
    h1 { margin: 0; font-size: 1.1rem; }
  </style>
</head>
<body>
  <div class="dash">
    <header class="top"><h1>Shop dashboard</h1></header>
    <nav class="side">Menu</nav>
    <div class="sales">Sales today: 42</div>
    <div class="users">Visitors: 310</div>
    <div class="chart">Chart of the week</div>
  </div>
</body>
</html>

For phones, put a one-column map first ("top" "side" "sales" "users" "chart" with one column) and move the three-column map into @media (min-width: 700px), as in A new map for phones.

بۆ مۆبایل، سەرەتا نەخشەیەکی یەک ستوونی دابنێ ("top" "side" "sales" "users" "chart" بە یەک ستوون) و نەخشە سێ ستوونییەکە بگوازەرەوە بۆ ناو @media (min-width: 700px)، وەک لە نەخشەیەکی نوێ بۆ مۆبایل.

ExerciseڕاهێنانPredict the linesهێڵەکان پێشبینی بکە

In grid-template-columns: repeat(4, 1fr), which columns do these cover? (1) grid-column: 2 / 4, (2) grid-column: 3 / -1, (3) grid-column: span 2 on the first item, (4) the same three in a Kurdish page.

لە grid-template-columns: repeat(4, 1fr)ـدا، ئەمانە کام ستوونەکان دەگرنەوە؟ ⁦(1)⁩ grid-column: 2 / 4، ⁦(2)⁩ grid-column: 3 / -1، ⁦(3)⁩ grid-column: span 2 لەسەر یەکەم دانە، ⁦(4)⁩ هەمان سێیان لە لاپەڕەیەکی کوردیدا.

Show answerوەڵامەکە پیشان بدە
  • (1) Columns 2 and 3 (lines 2 to 4).
  • (2) Columns 3 and 4: -1 is line 5.
  • (3) Columns 1 and 2: the first free place, two tracks wide.
  • (4) The same columns, counted from the right: (1) is then the second and third column from the right.
  • ⁦(1)⁩ ستوونەکانی 2 و 3 (هێڵەکانی 2 تا ⁦4⁩).
  • ⁦(2)⁩ ستوونەکانی 3 و 4: -1 هێڵی 5ـە.
  • ⁦(3)⁩ ستوونەکانی 1 و 2: یەکەم شوێنی بەتاڵ، بە پانیی دوو ڕێچکە.
  • ⁦(4)⁩ هەمان ستوونەکان، بەڵام لە ڕاستەوە دەژمێردرێن: ⁦(1)⁩ ئەوکات ستوونی دووەم و سێیەمە لە لای ڕاستەوە.

Summaryپوختە

  • display: grid and grid-template-columns (and -rows) make the tracks; fr shares the free space after the fixed tracks and the gaps; repeat() writes patterns.
  • Items sit on numbered lines (grid-column: 1 / 3, span 2, 1 / -1); in a Kurdish page line 1 is on the right.
  • grid-template-areas draws the page as a map, and a media query can swap the map.
  • Extra items create the implicit grid: size it with grid-auto-rows: minmax(…).
  • repeat(auto-fit, minmax(200px, 1fr)) gives responsive columns without media queries.
  • place-items: center centres; subgrid lines up nested cards.
  • Flexbox for one direction, grid for two — usually both.
  • display: grid و grid-template-columns (و -rows) ڕێچکەکان دروست دەکەن؛ fr بۆشاییە بەتاڵەکە دوای ڕێچکە جێگیرەکان و gapـەکان بەش دەکات؛ repeat() نەخشە دەنووسێت.
  • دانەکان لەسەر هێڵی ژمارەکراو دادەنیشن (grid-column: 1 / 3، span 2، 1 / -1)؛ لە لاپەڕەیەکی کوردیدا هێڵی 1 لە لای ڕاستە.
  • grid-template-areas لاپەڕەکە وەک نەخشەیەک دەکێشێت و دەتوانێت نەخشەکە بگۆڕێت.
  • دانە زیادەکان دروست دەکەن: قەبارەی بە grid-auto-rows: minmax(…) دیاری بکە.
  • repeat(auto-fit, minmax(200px, 1fr)) ستوونی ڕێسپۆنسیڤ بێ دەدات.
  • place-items: center ناوەڕاست دەکات؛ subgrid ناوەکییەکان ڕێک دەخات.
  • بۆ یەک ئاڕاستە، grid بۆ دوو — زۆرجار هەردووکیان.
Review questionsپرسیارەکانی پێداچوونەوە
Flexbox or grid for a page with header, two side columns and a footer?Flexbox یان grid بۆ لاپەڕەیەک بە سەرپەڕە، دوو ستوونی لاتەنیشت و ژێرپەڕە؟

Grid: it places boxes in rows and columns at once; flexbox is best for one row, like a menu.

: سندووقەکان لە ڕیز و ستووندا پێکەوە دادەنێت؛ بۆ یەک ڕیز باشترە، وەک .

Next: Responsive Design makes a page like this fit every screen, from a phone to a wide monitor.

دواتر: دیزاینی ڕێسپۆنسیڤ وا دەکات لاپەڕەیەکی لەم جۆرە لەگەڵ هەموو شاشەیەکدا بگونجێت، لە مۆبایلەوە تا پان.

Lesson complete!وانەکە تەواو بوو!

Well done. Review the key terms, then go on to the next lesson.دەستخۆش. سەیرێکی زاراوە سەرەکییەکان بکەرەوە، پاشان بڕۆ بۆ وانەی داهاتوو.

Key termsزاراوە سەرەکییەکان

Next lessonوانەی داهاتوو

Responsive Design: Viewport, Media Queries and Mobile-Firstدیزاینی ڕێسپۆنسیڤ: ناوچەی بینین، پرسەکانی میدیا و مۆبایل لە پێشدا

Related lecturesوانە پەیوەندیدارەکان

References and further readingسەرچاوەکان و خوێندنەوەی زیاتر

This lecture is a first edition. The Kurdish text and terminology are waiting for review by Kurdish IT teachers.ئەم وانەیە چاپی یەکەمە. دەقە کوردییەکە و زاراوەکانی چاوەڕێی پێداچوونەوەی مامۆستایانی کوردی بواری IT ن.

Appearanceڕووکار

Modeدۆخ
Styleشێواز
Coloursڕەنگەکان

Saved on this device only.تەنیا لەسەر ئەم ئامێرە پاشەکەوت دەکرێت.