CSS režģa izkārtojuma vienības rokasgrāmata
The CSS režģa izkārtojuma modulis tika piegādāts ar a jauna CSS vienība sauc par fr vienību. Tik vienkārši, kā tas var būt, fr ir vārda saīsinājums “frakcija”. Jaunā vienība ļauj ātri sagriezt režģi proporcionālās kolonnās vai rindās. Tā rezultātā, pilnībā atsaucīgi un elastīgi režģi kļūst gandrīz brīze.
Tā kā frakcijas vienība tika ieviesta kopā ar režģa izkārtojuma moduli, to var izmantot jebkurā pārlūkprogrammā atbalsta CSS tīklu. Ja vēlaties arī atbalstīt vecākos pārlūkus, šeit ir liels CSS režģa pildījums kas ļauj izmantot ne tikai fr vienība, bet arī citas tīkla funkcijas.
Pamata lietošana
Pirmkārt, apskatīsim a pamata režģis kas izmanto frakcijas vienību. Tālāk redzamais izkārtojums iedala telpu trīs vienādas platuma kolonnas un divas vienādas augstuma rindas.
Pieejamais HTML ir izgatavots no seši divs atzīmēta ar .lodziņā klasē, iekšpusē a .iesaiņojums div.
1.2.3.4.5.6.
Lai izmantotu režģa izkārtojuma moduli, jāpievieno displejs: režģis; CSS īpašums iesaiņojumam. The režģa-veidnes kolonnas īpašums izmanto fr vienība kā vērtība; the trīs kolonnu attiecība ir 1: 1: 1.
Par tīkla rindām (režģa-veidnes rindas īpašums), es to neizmantoju fr vienību, jo tas ir jēga tikai tad, ja iesaiņojums ir fiksēts augstums. Pretējā gadījumā dažās ierīcēs var būt dīvaini rezultāti, tomēr, pat tad, fr vienību saglabā attiecību (un tas ir milzīgs).
The režģa plaisa īpašums pievieno 10px režģi starp kastēm. Ja jūs nevēlaties nevienu plaisu, vienkārši noņemiet šo īpašumu.
.iesaiņojums display: grid; režģa-veidnes kolonnas: 1fr 1fr 1fr; grid-template-rows: 200px 200px; režģa sprauga: 10px; .box krāsa: balta; teksta saskaņošana: centrs; fonta lielums: 30px; polsterējums: 25px;
Ņemiet vērā, ka iepriekšminētais CSS nesatur pamata stilu, piemēram, fona krāsas. Jūs varat atrodiet pilnu kodu demonstrācijā raksta beigās.
Mainīt attiecību
Protams, jūs nevarat izmantot tikai 1: 1: 1, bet jebkuru vēlamo attiecību. Zemāk es izmantoju 1: 2: 1 frakcijas kas arī sadala telpu trīs kolonnas bet vidējā kolonna būs divreiz plašāks kā pārējie divi.
Es arī palielināju vērtību režģa plaisa lai redzētu, kā tas izmaina izkārtojumu. Būtībā pārlūks atskaita režģa plaisu no skata loga platuma (šajā piemērā režģa nepilnības ir līdz 80px), un nogrieziet pārējo saskaņā ar dotajām frakcijām.
.iesaiņojums display: grid; režģa-veidnes kolonnas: 1fr 2fr 1fr; grid-template-rows: 200px 200px; režģa plaisa: 40px;
Apvienojiet fr ar citām CSS vienībām
Jūs varat apvienot the fr vienība ar citas CSS vienības arī. Piemēram, zemāk redzamajā piemērā es izmantoju 60% 1fr 2fr mana režģa attiecība.
Tātad, kā tas darbojas? The pārlūks piešķir 60% no skatīšanās platuma uz pirmo sleju. Tad pārējā telpa tiek sadalīta 1: 2 frakcijās.
To pašu var rakstīt arī kā 60% 13,33333% 26,66667%. Bet, atklāti sakot, kāpēc kāds gribētu izmantot šo formātu? Liela frakcijas vienības priekšrocība ir tā uzlabo kodu lasāmību. Turklāt tas ir pilnīgi precīza, jo procentuālais formāts joprojām ir tikai 99,9999%.
.iesaiņojums display: grid; režģa-veidnes kolonnas: 60% 1fr 2fr; grid-template-rows: 200px 200px; režģa sprauga: 10px;
Papildus procentiem, Jūs varat izmantot arī citas CSS vienības kopā ar frakciju vienību pt, px, em, un rem.
Pievienojiet atstarpi ar fr
Ko darīt, ja nevēlaties, lai jūsu dizains tiktu pārblīvēts un pievienot dažas atstarpes jūsu tīklam? Frakcijas vienībai ir arī vienkāršs risinājums.
Kā redzat, šis režģis ir tukša kolonna saglabājot visus sešus lodziņus. Šim izkārtojumam ir nepieciešams sagriezt atstarpi četrās kolonnās trīs vietā. Tātad, mēs izmantojam 1fr 1fr 1fr 1fr vērtība režģa-veidnes kolonnas īpašums.
Mēs pievienojam tukšo kolonnu režģa veidnes īpašums, izmantojot punktu apzīmējums. Būtībā šis īpašums ļauj jums atsauces nosaukums ir tīkla laukumi. Un jūs varat nosaukt režģa zonas ar režģa zona īpašums, kas jums jāizmanto atsevišķi katram apgabalam.
.iesaiņojums display: grid; režģa-veidnes kolonnas: 1fr 1fr 1fr 1fr; grid-template-rows: 200px 200px; režģa sprauga: 10px; grid-template-areas: "box-1 box-2. 3. lodziņš" "4-box box-5. .box-1 tīkla laukums: 1. lodziņš; .box-2 tīkla laukums: 2. lodziņš; .box-3 tīkla laukums: 3. aile; .box-4 tīkla laukums: 4. lodziņš; .box-5 tīkla laukums: 5. aile; .box-6 tīkla laukums: 6. aile;
Vietu atstarpes nav obligāti jāizveido kolonna, viņi var būt jebkur tīklā.
The atkārtot () funkciju
Varat arī izmantot fr vienību kopā ar atkārtot () funkciju priekš vienkāršāka sintakse. , tas nav nepieciešams, ja jums ir tikai vienkāršs režģis, bet tas ir ērts, ja vēlaties īstenot sarežģītu izkārtojumu, piemēram, a ligzdots režģis.
.iesaiņojums display: grid; grid-template-columns: atkārtot (3, 1fr); / * režģa veidnes kolonnas: 1fr 1fr 1fr; * / Grid-template-rindas: 200px; režģa sprauga: 10px;
The atkārtot (3, 1fr) sintakse rezultāts ir tāds pats kā 1fr 1fr 1fr. Zemāk redzamais izkārtojums ir tāds pats kā pirmais piemērs.
Ja jūs palielināt reizinātāju iekšpusē atkārtot () jums būs vairāk kolonnu. Piemēram, atkārtot (6, 1fr) rezultāts sešas vienādas kolonnas. Šajā gadījumā visas mūsu kastes būs vienā rindā, tas nozīmē, ka ir pietiekami izmantot tikai vienu vērtību (200px) režģa-veidnes rindas īpašums.
.iesaiņojums display: grid; grid-template-columns: atkārtot (6, 1fr); režģa-veidnes rindas: 200px; režģa sprauga: 10px;
Tu vari izmantot atkārtot () vairāk nekā vienreiz. Piemēram, šāds piemērs rada režģi, kurā ir pēdējās trīs slejas divreiz plašāks kā pirmie trīs.
.iesaiņojums display: grid; grid-template-columns: atkārtot (3, 1fr) atkārtošana (3, 2fr); režģa-veidnes rindas: 200px; režģa sprauga: 10px;
Jūs varat arī apvienot atkārtot () ar citām CSS vienībām. Piemēram, jūs varētu izmantot 200px atkārtošana (4, 1fr) 200px kā derīgu kodu.
Ja jūs interesē, kā to izdarīt izveidot sarežģītus izkārtojumus ar CSS Grid moduli, atkārtot () funkcijas un fr Rachel Andrew ir interesanta emuāra ziņa par to, kā to izdarīt.
Demonstrācija eksperimentēšanai
Visbeidzot, šeit ir solījums, ko es apsolīju. Tajā izmantots tas pats kods kā pirmais piemērs šajā rakstā. Fork to, un redzēt, ko jūs varat sasniegt ar fr vienību.
