CSS ruudukko alue ominaisuus

Määrittely ja käyttö

grid-area ominaisuus ruudukon kohteen koossa ja sijainnissa verkkoasennuksessa, se on seuraavien ominaisuuksien lyhennys:

grid-area ominaisuus voidaan käyttää nimeämään ruudukon kohteita. Sitten, kautta grid-konttorin grid-template-areas Ominaisuusviittaukset nimetyille ruudukon kohteille. Katso alla oleva esimerkki.

Katso myös:

CSS oppitunti:CSS ruudukkoasettelu

Esimerkki

Esimerkki 1

Aseta "item1" alkamaan riviltä 2 sarakkeesta 1 ja leviämään kahdella rivillä ja kolmella sarakkeella:

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
{}

Kokeile itse

Vinkki:Lisää esimerkkejä sivun alaosassa.

CSS syntaksi

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

Ominaisuuden arvo

Arvo Kuvaus
grid-row-start Määritä, mistä rivistä alkaa näyttää kohteet.
grid-column-start Määritä, mistä sarakkeesta alkaa näyttää kohteet.
grid-row-end Määritä missä riviviivassa projektin näyttäminen loppuu, tai kuinka monta riviä se kattaa.
grid-column-end Määritä missä sarakeviivassa projektin näyttäminen loppuu, tai kuinka monta saraketta se kattaa.
itemname Määrittelee ruudukkoprojektin kohteet.

Tekninen yksityiskohta

Oletusarvo: auto / auto / auto / auto
Perintä: Ei
Animaatioiden luominen: Tuki. Katso:Animaatiot.
Versio: CSS Grid Layout Module Level 1
JavaScript-kieli: object.style.gridArea="1 / 2 / span 2 / span 3"

Lisää esimerkkejä

Esimerkki 2

Item1 nimetty 'myArea', ja se leikkaantuu kaikilla viidellä sarakkeella viiden sarakkeen tietorakenteessa:

.item1 {
  grid-area: myArea;
{}
.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea myArea myArea myArea';
{}

Kokeile itse

Esimerkki 3

Tee 'myArea' leikkaantuvaksi kahdella sarakkeella viiden sarakkeen tietorakenteessa (pisteet merkitsevät nimeämättömiä kohteita):

.item1 {
  grid-area: myArea;
{}
.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .';
{}

Kokeile itse

Esimerkki 4

Tee 'item1' leikkaantuvaksi kahdella rivillä ja kahdella sarakkeella:

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
{}

Kokeile itse

Esimerkki 5

Nimeä kaikki kohteet ja luo valmis verkkosivumalli:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
{}

Kokeile itse

Selaimen tuki

Taulukon numerot osoittavat ensimmäisen selaimesen version, joka täysin tukee tätä ominaisuutta.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44