Ninaundaje muundo wa gridi ya CSS kwa kuona?

Tumia Ongeza safu wima na Ongeza safu mlalo kuweka gridi, chagua kipimo kwa kila wimbo, na urekebishe Pengo la safu na Pengo la safu. Kisha bonyeza Nakili kuchukua CSS au HTML inayolingana.

Ninaweza kuongeza safu wima na safu mlalo ngapi, na ni vipimo vipi vinavyopatikana?

Hadi safu wima 12 na safu mlalo 12. Kila wimbo unaweza kuwa 1fr, 2fr, 3fr, auto, thamani za px zisizobadilika, asilimia, min-content, max-content au safu za mtindo wa minmax(100px, 1fr).

Je, kuna mipangilio iliyotengenezwa tayari ya kuanzia?

Ndiyo. Maajabu ni Ibada madhubuti, Upau wa kando + maudhimisho, Safu wima 12 na Orodha ya picha. Chagua moja, kisha hariri nyimbo na mapengo ili kutoshea ukurasa wako.

Ninafanyaje gridi ya safu wima 12 kama Bootstrap?

Chagua kielelezo cha Safu wima 12, ambacho kinaweka safu wima kumi na mbili za 1fr na pengo la 16px. Kisha unaweza kubadilisha kitelezi cha Pengo la safu, ambacho kinatoka 0 hadi 48px.

Je, zana inatuma gridi yangu mahali popote, na ninaweza kushiriki mpangilio?

Kila kitu hufanyika kwenye kivinjari chako na hakuna kinachopakiwa. Zana imeundwa kurejesha usanidi kutoka kwa URL ya ukurasa, kwa hivyo kiungo kinaweza kuunda upya gridi yako.

Ndiyo. Kila zana ni bure kutumia, bila akaunti na bila kadi ya mkopo. Kazi inafanyika kwenye kifaa chako badala ya seva zetu, jambo linaloiwezesha kuwa bure kutumika.

Je, inafanya kazi kwenye simu?

Ndiyo. Inafanya kazi kwenye vivinjari vya kisasa vya simu vya iOS na Android, bila kusakinisha chochote.

🟦

Kitengenezea CSS Grid bila malipo

Zungu CSS grid — tracks, vitengo na pengo — na kunakili CSS na HTML iliyozalishwa.

Inafanya kazi kwenye kivinjari chakoHakuna usajili, hakuna madirisha ibukiziHakuna kuingia kinachohitajikaBure milele

Inafanya kazi bila mtandao mara ikishapakia

Zungu CSS grid kwa mwonekano: ongeza safu na safu, zainisha fr/px/auto/min-content vitengo, sawa pengo, na kutazama muonyaji wa moja kwa moja. Nakili CSS iliyotayarihwa na HTML inayoambatana.

Maajabu

Safu (3)

Safu (2)

Pengo la safu: 16pxPengo la safu: 16px

Muonyaji wa moja kwa moja

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>

🔒 Kila kitu kinaendelea katika kivinjari chako — hakuna kinachoupakiwa.

Jinsi Inavyofanya Kazi

Buni gridi ya CSS kwa macho: ongeza hadi safu 8 na mistari 8, weka kila kifuatiliaji kuwa fr, px, auto au min/max-content, na rekebisha mapengo ya mstari/safu. Onyesho la awali la moja kwa moja lililohesabiwa linasasishwa papo hapo na CSS ya grid-template iliyozalishwa pamoja na HTML inayolingana ni bofya moja kutoka clipboard yako.

1
Umba gridi
Ongeza/ondoa safu na mistari kwa + na −.
2
Panga vifuatiliaji
Kila safu na mstari unapata kipimo chake (1fr, 100px, auto…).
3
Rekebisha mapengo
Vitelezi tofauti vya row-gap na column-gap.
4
Nakili msimbo
CSS tayari-kwa-uzalishaji na muundo wa HTML unaolingana.

Kila kitu kinafanya kazi kwenye kivinjari chako — hakuna kinachopakiwa.

Zana Zinazohusiana

↔️

Kitengenezea CSS Flexbox

Jaribu mwelekeo wa kubana, songa, na justifikasi kwenye vitu vya moja kwa moja — na kunakili CSS.

Jaribu

📐

Jenereta ya CSS clamp()

Tengeneza thamani ya CSS clamp() ya mtiririko kwa fonti na nafasi inayojibu. Weka ukubwa wa chini/juu na mbalimbali wa eneo la kuona, uone mwonekano wa moja kwa moja, na nakili CSS ya mstari mmoja.

Jaribu

📓

Karatasi ya Kuchapisha — Yenye Mistari, Gridi, Vitone na Muziki (PDF)

Chapisha karatasi yako mwenyewe: yenye mistari (mipana au ya chuo), gridi, gridi ya vitone, isometriki, mazoezi ya mwandiko, mistari ya muziki au maelezo ya Cornell, kwa A4, Letter, A5 au Legal, rangi yoyote ya mstari, kwa kurasa nyingi unavyohitaji. PDF kali ya vekta iliyotengenezwa kwenye kivinjari chako.

Jaribu

Kitengenezea CSS Grid bila malipo

Jinsi Inavyofanya Kazi

Zana Zinazohusiana

Kitengenezea CSS Flexbox

Jenereta ya CSS clamp()

Karatasi ya Kuchapisha — Yenye Mistari, Gridi, Vitone na Muziki (PDF)

Maswali Yanayoulizwa Mara Kwa Mara