Hisia ya CSS grid
Uteuzi na matumizi
Kipendekezo cha grid ni kipendekezo cha matumizi ya kipendekezo cha kina:
- grid-template-rows
- grid-template-columns
- grid-template-areas
- grid-auto-rows
- grid-auto-columns
- grid-auto-flow
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'; }
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