Hisia ya CSS grid

Uteuzi na matumizi

Kipendekezo cha grid ni kipendekezo cha matumizi ya kipendekezo cha kina:

Tafadhali tazama:

Matendo ya CSS:Kufaa kwa CSS

Mifano

Mfano 1

Kufanya muundo wa majira ya tatu, kwa ukubwa wa kwanza wa hatua 150 mita:

.grid-container {
  display: grid;
  grid: 150px / auto auto auto;
}

Tafadhali tuendelee kufikia kufikia kwa kusoma

Mfano 2

Tukioa mitaasisi kumi, kwa 'item1' kuwa na uwanja wa mbali mbali kati ya kati mbili za mbali mbili kwa muundo wa majira ya kati (ina majira ya kati ya nane):

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

Tafadhali tuendelee kufikia kufikia kwa kusoma

Mfano 3

Wenyeza mifano, na kufungua moja kwa kipandiko cha kiumeji:

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

Tafadhali tuendelee kufikia kufikia kwa kusoma

Inayotumika Kiingereza

grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit;

Chaguo cha kampuni

Wakati Ufafanuzi
none Chaguo cha kuzingatia. Haina ufafanuzi wa siku hizi au kampuni.
grid-template-rows / grid-template-columns Inaamua ukubwa wa kampuni na siku hizi.
grid-template-areas Inaamua kampuni zilizotumika kwa kumekana kwa kampuni zilizotumika kwa jina.
grid-template-rows / grid-auto-columns Inaamua ukubwa wa siku hizi (ingizi) na kampuni zilizotumika kwa kumekana kwa kampuni zilizotumika.
grid-auto-rows / grid-template-columns Inaamua ukubwa wa siku hizi (ingizi) na kuweka kampuni kuu cha grid-template-columns.
grid-template-rows / grid-auto-flow grid-auto-columns Inaamua ukubwa wa siku hizi (ingizi), na siku hizi zilizotumika, na kampuni zilizotumika kwa kumekana kwa kampuni zilizotumika na ukubwa wa kampuni zilizotumika.
grid-auto-flow grid-auto-rows / grid-template-columns Inaamua siku hizi kwa kampuni zilizotumika, ukubwa wa siku hizi na kuweka kampuni kuu cha grid-template-columns.
initial Kuweka kampuni hii kwa chaguo cha kuzingatia cha kawaida. Tazama: initial.
inherit Kuweka kampuni hii kwa chaguo cha kuzingatia kwa kutoka kwa kampuni ya baba. Tazama: inherit.

Vivyo vya kidokezo

Chaguo cha kuzingatia: none none none auto auto row
Kupatikana kwa utumiaji: Hapana
Harakati ya ujenzi: Ndiyo, tazama vipengano vyovyo. Tazama:Vipengano vya harakati.
Tahariri: CSS Grid Layout Module Level 1
Inayotumika Kiingereza: object.style.grid="250px / auto auto auto"

Matumizi ya browser

Inanza zilizopataa kina za browser zinaaminika kwa sababu ya uharibifu wa kampuni hizi.

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

Tafadhali tazama:

Kitabu cha CSS cha Mafunzo:kampuni kuu cha grid-template-areas

Kitabu cha CSS cha Mafunzo:kampuni kuu cha grid-template-rows

Kitabu cha CSS cha Mafunzo:kampuni kuu cha grid-template-columns

Kitabu cha CSS cha Mafunzo:kampuni kuu cha grid-auto-rows

Kitabu cha CSS cha Mafunzo:kampuni kuu cha grid-auto-columns

Kitabu cha CSS cha Mafunzo:kampuni kuu cha grid-auto-flow

Kitabu cha CSS cha Mafunzo:kampuni kuu cha grid-row-gap

Kitabu cha CSS cha Mafunzo:kampuni kuu cha grid-column-gap