Esiste un'implementazione funzionante di CSS3 Grid Layout per Webkit?

CSS Grid Layout, Editor’s Draft, 21 November 2011Esiste un'implementazione funzionante di CSS3 Grid Layout per Webkit?

io sono in mezzo a produrre un prototipo che verrà mostrato a client su dispositivi e browser selezionati. Non sono preoccupato per la compatibilità cross-browser in questo momento.

IE10 Developer Preview è il seguente:

display: -ms-grid; 
-ms-grid-columns: ; 
-ms-grid-rows: ; 
-ms-grid-column: ; 
-ms-grid-row: ; 
-ms-grid-row-align: stretch; 
columns: ; 
column-fill: auto; 
column-gap: ;

Mozilla sfugge ad avere simile al precedente (non ho ancora testato se funziona, ancora). Tuttavia, WebKit sembrano avere una diversa implementazione:

display: -webkit-box; 
-webkit-columns: ; 
-webkit-column-gap: ;

Ora, è Webkit utilizzando la stessa specifica, o si tratta di un modello completamente diverso? Se si sta usando la stessa specifica, potreste dirmi che cosa la sintassi è per:

grid-columns: ; 
grid-rows: ; 
grid-column: ; 
grid-row: ;

E, se si utilizza un modello diverso, la prego di farmi sapere che cosa la sintassi è e come si differenzia da MS E10. Le referenze saranno apprezzate.

Vale la pena notare che ho installato Google Chrome Canary, così come l'ultima versione di Safari per testare la griglia su Webkit.

fonte

2012-01-26 DigiKev

Vale la pena notare che Google Chrome ha un modello funzionante del layout Flex Box, che potrei usare come ripiego, ma funziona in modo molto diverso. Preferirei usare un modello simile. – DigiKev

Sono molto entusiasta delle griglie di CSS per il layout. Ecco la proposta per l'interessato: http://www.w3.org/TR/css3-grid-layout/ –

http://caniuse.com/css-grid

A partire dal marzo 2017, un bel paio di browser supportano ora Griglia layout CSS:

vecchia risposta:

C'è qualcosa nelle opere, qui è l'albero dei problemi completo per la sua implementazione:

https://bugs.webkit.org/showdependencytree.cgi?id=60731&hide_resolved=0

Ecco alcuni CSS da this file:

.gridWithFixed { 
    display: -webkit-grid; 
    -webkit-grid-columns: 7px 11px; 
    -webkit-grid-rows: 17px 2px; 
}

Si può vedere l'intento. Sfortunatamente, hanno solo analizzato il CSS.

Quindi, sembra che adesso non ci sia un'implementazione funzionante di questo per WebKit.

Mentre il Grid Layout ha un supporto molto scarso, Flexbox ha un supporto decente (apparentemente, incluso IE10). Ti suggerisco di usare Flexbox invece.

fonte

2012-01-26 10:03:01 thirtydot

Ma flexbox è * niente * rispetto alla potenza di CSS3-grid-layout! * Nooooo! * Inoltre, flexbox non è supportato abbastanza ampiamente da farti comodo usarlo ([caniuse.com] (http://caniuse.com/flexbox) dice <60% degli utenti), e la maggior parte dei browser solo parzialmente supportarlo Le specifiche della griglia CSS3 elimineranno totalmente la necessità di Flexbox, dato che può fare tutto ciò che si suppone e più. – naught101

Non sono d'accordo sul fatto che le specifiche della griglia elimineranno la necessità di un flexbox. Ci sono cose che le Flexbox sono buone a quelle griglie non lo sono. –

@thirtydot Se si desidera aggiornare la risposta, Safari 10.1 è ora disponibile con Grid. – gsnedders

Chrome Canary implementa il CSS Grid Layout TR 20130910. Ho trovato piccole differenze in alcuni dei nomi delle proprietà. Steven Bradley summarizes the TR e fornisce instructions and examples per come iniziare a utilizzare il layout della griglia. Per abilitare funzioni sperimentali a Canary, copiare e incollare il seguente nella barra degli indirizzi

chrome://flags/#enable-experimental-web-platform-features

e fare clic su ‘abilitare’.

fonte

2013-11-15 18:58:43 wjohnson

Esiste un'implementazione funzionante di CSS3 Grid Layout per Webkit?

risposta

Problemi correlati