¿Hay una implementación en funcionamiento del diseño de cuadrícula CSS3 para Webkit?

CSS Grid Layout, Editor’s Draft, 21 November 2011¿Hay una implementación en funcionamiento del diseño de cuadrícula CSS3 para Webkit?

yo estoy en el medio de la producción de un prototipo que se mostrará a los clientes en los dispositivos y navegadores seleccionados. No estoy preocupado por la compatibilidad entre navegadores en este momento.

IE10 Preliminar de Desarrollo tiene la siguiente:

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 elude a tener similar al anterior (no he probado si funciona, sin embargo). Sin embargo, WebKit parecen tener una aplicación muy diferente:

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

Ahora, es Webkit usando la misma especificación, o se trata de un modelo completamente diferente? Si se está usando la misma especificación, ¿podría decirme lo que la sintaxis es para:

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

Y, si está utilizando un modelo diferente, ¿podría por favor hágamelo saber lo que la sintaxis es y cómo se diferencia de MS E10. Las referencias serán apreciadas.

Vale la pena señalar que tengo instalado Google Chrome Canary, así como la última versión de Safari para probar la grilla en Webkit.

Fuente

2012-01-26 DigiKev

Vale la pena señalar que Google Chrome tiene un modelo funcional del diseño de Flex Box, que podría usar como alternativa, pero funciona de manera muy diferente. Preferiría usar un modelo similar. – DigiKev

Estoy muy entusiasmado con las cuadrículas CSS para el diseño. Aquí está la propuesta para el interesado: http://www.w3.org/TR/css3-grid-layout/ –

http://caniuse.com/css-grid

A partir de marzo de 2017, un buen número de navegadores ahora soportan CSS Diseño de cuadrícula:

vieja respuesta:

Hay algo en las obras, aquí es el árbol completo de problemas para su implementación:

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

Aquí hay un poco de CSS de this file:

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

Se puede ver la intención. Desafortunadamente, solo han llegado al punto de analizar el CSS.

Por lo tanto, parece que en este momento no hay una implementación en funcionamiento de esto para WebKit.

Mientras que Grid Layout tiene muy poca compatibilidad, Flexbox tiene un soporte decente (aparentemente, incluyendo IE10). Te sugiero que uses Flexbox en su lugar.

Fuente

2012-01-26 10:03:01 thirtydot

¡Pero flexbox es * nada * en comparación con la potencia de CSS3-grid-layout! * ¡Nooooo! * Además, Flexbox no es lo suficientemente compatible como para que te sientas cómodo al usarlo ([caniuse.com] (http://caniuse.com/flexbox) dice <60% de los usuarios), y la mayoría de los navegadores solo parcialmente apoyarlo. La especificación de la cuadrícula CSS3 erradicará por completo la necesidad de flexbox, ya que puede hacer todo lo que se supone que flexbox y más. – naught101

No estoy de acuerdo con que la especificación de la red erradique la necesidad de una flexbox. Hay cosas que los flexboxes son buenos en cuanto a que las grillas no lo son. –

@thirtydot Si desea actualizar su respuesta, Safari 10.1 se ha enviado con Grid ahora. – gsnedders

implementa CSS Grid Layout TR 20130910. He encontrado diferencias menores en algunos de los nombres de las propiedades. Steven Bradley summarizes the TR y proporciona instructions and examples para saber cómo empezar a usar el diseño de la cuadrícula. Para habilitar las características experimentales en Canarias, copiar y pegar el siguiente en la barra de direcciones

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

y haga clic en ‘enable’.

Fuente

2013-11-15 18:58:43 wjohnson

¿Hay una implementación en funcionamiento del diseño de cuadrícula CSS3 para Webkit?

Respuesta

Cuestiones relacionadas