Uwanja wa CSS Grid

Zana zote

Tunga violezo vya CSS Grid kwa macho, nafasi na uwekaji, kisha nakili CSS ya mpangilio.

Onyesho la awali

Bofya kipengele chenye nambari kwenye gridi ili kukichagua na kukipanga upya.

grid-template-columns —
grid-template-rows —
CSS iliyotengenezwa
—
—
Safu wima
Safu mlalo
Nafasi
16px
16px
Mpangilio
Vipengele vya gridi
Kipengele 1
Mipangilio tayari

Kuhusu Uwanja wa CSS Grid

CSS Grid Playground inakusaidia kutengeneza mipangilio halisi ya grid kwa njia ya kuona. Ongeza au ondoa nyimbo za safu wima na safu mlalo ili kuunda grid-template-columns na grid-template-rows, weka nafasi kati ya safu wima na safu mlalo, na urekebishe sifa zote nne za upatanishi — justify-items, align-items, justify-content na align-content — huku onyesho la awali likionyesha kila mabadiliko papo hapo.

Uwekaji wa vitu ndipo grid zinapoonyesha nguvu yake halisi: ongeza vitu, bofya kimoja kwenye onyesho la awali ili kukichagua, kisha kiweke kwa kutumia column start, column span, row start na row span. Hivi ndivyo sehemu za pembeni, vichwa vya habari na seli maalum zinavyoweza kutandaa nyimbo nyingi — mbinu iliyopo nyuma ya karibu kila mpangilio wa grid wa ulimwengu halisi.

Mifano mitatu tayari — holy grail, dashibodi na galari — inapakia miundo ya kurasa za asili unayoweza kuichambua na kuibadilisha. Mpangilio ukiwa sahihi, nakili CSS iliyotengenezwa, ambayo ina kanuni kamili za kontena la grid pamoja na uwekaji wa kila kipengele.

Jinsi ya kutumia Uwanja wa CSS Grid

  1. Ongeza au ondoa nyimbo za safu wima na safu mlalo ili kufafanua kiolezo cha grid.
  2. Weka nafasi ya safu wima na nafasi ya safu mlalo.
  3. Rekebisha vidhibiti vya upatanishi: justify-items, align-items, justify-content na align-content.
  4. Ongeza vitu, bofya kimoja kwenye onyesho la awali, kisha weka mwanzo/urefu wa safu wima na safu mlalo ili kukipanga.
  5. Pakia mfano wa holy grail, dashibodi au galari ili kujifunza mpangilio wa asili.
  6. Nakili CSS iliyotengenezwa kwenye stylesheet yako.

Maswali yanayoulizwa mara kwa mara

justify-items hupatanisha kila kipengele ndani ya seli yake ya grid; justify-content hupatanisha grid nzima ndani ya kontena wakati nyimbo hazijajaza nafasi yote. Tofauti hiyo hiyo inatumika kwa mwelekeo wima kati ya align-items na align-content.

Chagua kipengele kisha ongeza column span yake — matokeo ya CSS hutumia grid-column pamoja na thamani ya span. Ukichanganya na row span unaweza kujenga bar za vichwa, sehemu za pembeni na seli kubwa maalum ndani ya grid moja.

Ni muundo wa kawaida wa ukurasa: kichwa na kijachini vyenye upana kamili, na safu tatu kati yake — urambazaji, maudhui makuu na sehemu ya ziada. Ulikuwa mgumu sana kwa kutumia floats; mfano huu unaonyesha jinsi uwekaji mchache wa grid unavyolitatua kwa urahisi.

Grid inafanya vizuri zaidi kwa mipangilio ya pande mbili ambapo safu mlalo na safu wima lazima zipatane — muundo wa ukurasa, dashibodi, galari. Flexbox ni bora kwa mtiririko wa upande mmoja kama vile toolbar na menyu. Zinachanganyika vizuri: grid kwa ukurasa mzima, flex ndani ya vipengele.

Ndiyo, ni bure na inafanya kazi kwenye kivinjari — jaribu kadri unavyotaka, na hakuna chochote unachotengeneza kinachotoka kwenye kompyuta yako.
Shiriki hii
Zana Zinazohusiana
Kitengenezaji Sahihi ya Barua Pepe Buni sahihi ya barua pepe ya HTML yenye umbo la kitaalamu kutoka kwa templeti 30, ibinafsishe na uihifadhi. Bila Malipo
Ikoni hadi PNG Geuza Bootstrap Icons, Font Awesome na zaidi kuwa picha maalum za PNG — bure, ndani ya kivinjari chako. Bila Malipo
Kiunda Ikoni za Programu Unda seti kamili ya ikoni za programu iliyo tayari kwa duka kwa ajili ya App Store na Google Play — mandharinyuma bora ya gredienti, mesh na ruwaza, iliyoundwa kutoka nembo yako. Bila Malipo
Kitengeneza Favicon Tengeneza kifurushi kamili cha favicon kutoka kwa nembo, ikoni ya fonti au monogram — favicon.ico, PNG za kisasa, Apple touch icon, PWA icons, web manifest na kijisehemu cha HTML. Bila Malipo
Kizalishi cha CSS Box Shadow Tengeneza vivuli vya CSS box-shadow vilivyowekwa tabaka kwa kutumia vitelezi vya moja kwa moja vya umbali, ukungu, usambazaji, rangi, uwazi na inset — angalia muundo kwenye kipengele halisi na nakili CSS tayari kupachika papo hapo. Bila Malipo
Jenereta ya CSS Border Radius Tengeneza CSS border-radius kwa macho ukiwa na onyesho la moja kwa moja na nakili msimbo tayari kwa matumizi. Bila Malipo
Utafutaji maarufu
jenereta ya css grid uwanja wa css grid jenereta ya grid-template-columns jenereta ya mpangilio wa css grid mjenzi wa grid-template-areas zana ya css grid gap kionyeshi cha css grid
Unahitaji msaada?
Umepata tatizo na zana hii? Tujulishe timu yetu.
Ripoti tatizo

Ongeza zana hii ya bure kwenye tovuti yako mwenyewe — nakili na ubandike msimbo ulio hapa chini.