Muoti joustavat ulkoasut CSS-verkkoon

Sep 11, 2025
Miten tehdään
A woman sits at a laptop tweaking a CSS Grid layout

CSS Grid sopii erinomaisesti rivien ja sarakkeiden kahden akselin ulkoasujen luomiseen. Syntaksi on yksinkertainen ja tekee sivun asettelu tuulta. Asettelut, jotka olisivat vaatineet useita sisäkkäisiä säiliöitä, voidaan nyt yksinkertaisesti kuvata CSS: ssä.

Verkko toimii eri tavoin muihin ulkoasupitoisiin ominaisuuksiin, koska "ruudukko" -arvo "näyttö" -ominaisuuteen vaikuttaa kaikkiin suoriin lapsiin. Nämä elementit ovat nyt ruudukkotuotteita ja ne sijoitetaan vanhemman asettamien sääntöjen mukaan (ellei erityisen sijoitettu).

Hanki tarttumaan verkkoon

Grid tuo useita uusia ominaisuuksia:

  • GRID GAP

Sen sijaan, että käytät marginaaleja, verkko on oma omaisuutensa ruudukkojen välisten aukkojen määrittelemiseksi, mikä mahdollistaa ruudukon ulkoasun määritellä ja ei vaikuta millä tahansa aukoilla. Grid Systems (kuten Inuit ja Twitter-bootstrap), jotka ovat yleensä luottavat negatiivisten marginaalien asettamiseen, jotta kaikki oikein voidaan kohdistaa oikein.

  • FR-yksikkö

Lyhyt fraktio, tätä uutta mittayksikköä käytetään jakamaan layout fraktioihin ja ilman aukkoa.

  • Grid sijoitus

CSS-verkko mahdollistaa minkä tahansa elementin asettavan ja sijoittamisen mihin tahansa verkkoon ennen kaikkea muita kohteita, jotka sitten sijoitetaan automaattisesti.

  • Grid-alueet ja mallit

Määritetään nimetyt alueet verkkoon, joita voidaan sitten viitata määrittelemään ulkoasu lähes ASCII-muoti.

  • Minmax ()

MINMAX () "-ominaisuusarvo mahdollistaa vähimmäis- ja enimmäiskoko ruudukkotuotteille, sarakkeille ja riveille. Tämä ominaisuus puuttuu valitettavasti Flexboxista ja jokaisesta muista CSS: ssä.

Rakenna verkkosi

CSS Gridin voimakkaita alueita ja malleja mahdollistavat helposti monimutkaisten ulkoasujen helposti saavutettavissa. Aloitat käyttämällä nimeä verkon elementteihin käyttämällä Grid-alue "-ominaisuutta - esimerkiksi" otsikko {Gid-alue: otsikko; } ". Kun olet nimittänyt kaikki verkkosi alueet, voit käyttää "Grid-template-alueiden omaisuutta kuvaamaan ulkoasua. 

 Verkko-template-alueet:
  "Header Header Header"
  "Vasen sivupalkin artikkeli oikeanpuoleiset sivupalkit"
  "Footer Footer Footer"
;

Yllä oleva koodiesimerkki kuvaa kolmen kolmen ruudukon, yksinkertaisesti toistat ruudukkokohdan nimen, jos haluat sen, että se kulkee useita sarakkeita tai rivejä. Voit myös käyttää Media-kyselyitä, jotta voit muuttaa eri kokoisia näytöitä.

Tämän jälkeen voit käyttää uutta "FR" -yksikköä määrittämään, kuinka leveys on jaettu eri sarakkeiden kesken: 

 Grid-template-sarakkeet: 1FR 3fr 1fr;

Edellä esitetty esimerkki jakaa käytettävissä olevan leveyden viiteen yhtä suureen leveyteen; Toisin sanoen se soveltaa viidesosaa ensimmäiseen sarakkeeseen, kolme viidesosaa toiseen sarakkeeseen ja lopulliseen viidesosaan lopulliseen sarakkeeseen.

Jotta rivit voidaan koota, voit käyttää uutta MINMAX-ominaisuusarvoa koon ylä- ja alareunat sisältöönsä ja sallia sitten keskikiville jäljellä oleva tila ruudukkoon. 

 Grid-template-rivit:
  Minmax (min-sisältö, max-Sisältö)
  auto
Minmax (min-sisältö, max-sisältö);

Tämä artikkeli julkaistiin alun perin Creative Web Design Magazine Web Designerin julkaisussa 271. Ostaa Julkaisu 271 tai Tilaa web-suunnittelija .

Haluatko vahvistaa CSS-verkkoja?

Brenda Storer is giving her talk Using CSS Grid in the Real World at Generate New York from 25 - 27 April 2018

Brendan vartija antaa puheenvuoron CSS-verkkoon todellisessa maailmassa Generate New Yorkissa 25.-27.4.2018

Ohjelmistokehitysviraston suunnittelija- ja etupäätekijänä Brenda -varasto on käyttänyt CSS-verkkoa tuotannossa verkkosivustoille alusta lähtien selaimille maaliskuussa 2017 ja on suuri tuuletin.

Hänen puheessaan Luo New York 25.-27.4.2018 Brenda näyttää vaihe vaiheelta, miten voit vähitellen parantaa sivuston CSS Grid ja kirjoittaa luodinkestävät varmistuksena vanhemmille selaimille (tai jopa käyttää edelleen nykyistä ristikon kehyksen varalla), kaikki puhtaalla CSS: Ei JavaScript puuttuu .

Luo New York järjestetään 25.-27. Huhtikuuta 2018. Hanki lippu nyt .

Aiheeseen liittyvät artikkelit:

  • CSS Grid Layout Secrets paljasti
  • Luo reagoiva asettelu CSS-verkkoon
  • Nouse nopeuteen CSS Gridin kanssa

Miten tehdään - Suosituimmat artikkelit

LINO PRINTMAING: Johdanto

Miten tehdään Sep 11, 2025

(Kuva luotto: Meg Buick) Lino-tulostus on helpotuspainatusmenetelmä, johon liittyy piirustuksen veistämällä pehme..

Merkki typografia: täydellinen opas

Miten tehdään Sep 11, 2025

Pentagram loi ripeshoke tyyppihyväksyntää julkiselle teatterille (Kuva luotto: Pentagrammille yleisölle) ..

Käytä negatiivista tilaa parempaan käteen

Miten tehdään Sep 11, 2025

Jopa näennäisesti monimutkainen prosessi, kuten käden piirtäminen voidaan yksinkertaistaa oikeilla piirustustekniikoilla ja t..

Luo interaktiivinen parallax-kuva

Miten tehdään Sep 11, 2025

Parallax vieritys ei ole enää taattu huomiongberi, jota se oli aiemmin ollut, mutta on olemassa muita tapoja käyttää parallax-tekni..

Luo upeita maisemia Houdini

Miten tehdään Sep 11, 2025

SIDEFX: n 3D-ohjelmistohoidon käyttämällä Sidefxin 3D-ohjelmistoa käsittelevää menetelmää käyttämällä digitaalisia t..

Oikean prototyypin työkalun valitseminen

Miten tehdään Sep 11, 2025

Prototyyppi on ehkä yksi web-suunnitteluprosessin tärkeimmistä osista. Rakentamalla a Verkkosivuston proto..

Tee komposiitti Photoshopissa

Miten tehdään Sep 11, 2025

Adobe käynnistää nykyisin uuden sarjan video-opetusohjelmat Luova pilvi sovelluksia 60 sekunnissa tai vähemmän. Olitpa aloittelija tai haluan vai..

5 tapaa hallita kassavirtausta tehokkaasti

Miten tehdään Sep 11, 2025

Cashflowin hallinta on avain freelance-menestykseen, ja on olemassa joitakin kovia ja nopeita sääntöjä varmistaaksesi, että ..

Luokat