Sameeyaha CSS Grid oo Bilaash ah

Naqshadee grid CSS ah si muuqaal ah — tracks, halbeegyo iyo gaps — kadibna koobi CSS-ka iyo HTML-ka la abuuray.

Wuu shaqeeyaa oflaayn marka la shubo
Hormar
Tiirarka (3)
Saffaf (2)
Preview toos ah
1
2
3
4
5
6
css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 16px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

🔒 Wax walba waxay ku socdaan browser-kaaga — waxba lama soo shubo.

Sida Ay U Shaqeyso

Naqshadee CSS grid muuqaal ahaan: ku dar ilaa 8 tiir iyo 8 saf, deji socod kasta fr, px, auto ama min/max-content, oo hagaaji farqiyada saf/tiir. Fiiriyaha lambarrayn-toos-ah ayaa isla markiiba cusboonaysiin, CSS-ka grid-template la sameeyay iyo HTML u dhigma waxay hal-guji ka fog yihiin clipboard-kaaga.

  1. 1
    Qaabee shabagga
    Ku dar/ka saar tiirar iyo safaf + iyo −.
  2. 2
    Deji socodyada
    Tiir iyo saf kastaaba wuxuu helaa unuggiisa gaarka ah (1fr, 100px, auto…).
  3. 3
    Habee farqiyada
    Sliders gooni ah oo row-gap iyo column-gap ah.
  4. 4
    Koobi koodhka
    CSS diyaar-u-ah-wax-soo-saarka iyo skeleton HTML u dhigma.

Wax walba wuxuu ka shaqeeyaa biraawsarkaaga — waxba lama shubo.

Qalabka La Xiriira

Su'aalaha Inta Badan La Iska Weydiiyo