Control total sobre las cuadrículas: nuevo panel de diseño de Firefox para cuadrículas CSS

Control total sobre las cuadrículas: nuevo panel de diseño de Firefox para cuadrículas CSS

Anteriormente, los diseños adecuados basados ​​en cuadrículas solo eran posibles de formas inconvenientes. Las nuevas cuadrículas CSS, que han estado disponibles en las versiones más nuevas de los navegadores populares durante un tiempo, finalmente permiten estos diseños. En Firefox, al menos en la versión Nightly, hay un nuevo panel de diseño en el inspector de herramientas para desarrolladores, lo que facilita el manejo de las cuadrículas CSS.

Mejores diseños a través de cuadrículas CSS

El nuevo modelo de cuadrícula finalmente nos permite desarrollar diseños complejos que se basan en una cuadrícula personalizada. Puede definir columnas y filas de CSS, distancias y anchos. Posteriormente, los elementos deseados se colocarán dentro de la cuadrícula.

body {
  display: grid;
  grid-template-rows: 200px 1fr 100px;
  grid-template-columns: 25% 25% 25% 25%;
}

Para un diseño de cuadrícula, el atributo «mostrar» debe convertirse al nuevo modelo de diseño a través de «cuadrícula». Posteriormente, las filas y columnas de la cuadrícula se definen utilizando “grid-template-rows” y “grid-template-columnas”. Aquí, son posibles tanto especificaciones absolutas como relativas.

Para cada fila o columna, se distribuye un valor. Es posible la combinación de valores absolutos y relativos. Esto permite que las filas tengan valores fijos, como se muestra en el ejemplo. La unidad “fr” para fracción nos permite crear anchos y alturas flexibles. Aquí, la unidad «fr» llena el espacio vacío dentro de la cuadrícula.

Además, puede utilizar “grid-row-gap” y “grid-column-gap” para definir espacios entre las celdas individuales de la cuadrícula. Esto le brinda la oportunidad de desarrollar cuadrículas únicas y flexibles para sus diseños web.

Una vez definida la cuadrícula, se deben colocar los contenidos individuales. Para ello, defina en cuál de las celdas de la cuadrícula se supone que se debe establecer el contenido.

header {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
}

Utilice «grid-column-start» y «grid-column-end» para seleccionar los puntos inicial y final dentro del ráster. De manera análoga a eso, hay «grid-row-start» y «grid-row-end». Estos cuatro atributos definen las celdas dentro de las cuales estará el elemento respectivo.

El principio de la cuadrícula CSS es bastante simple. El marcado, por otro lado, no es tan fácil de entender, especialmente cuando se trata de cuadrículas más complejas. Aquí es donde entra en juego el nuevo panel de diseño del inspector de Firefox.

El nuevo panel de diseño muestra cuadrículas

En primer lugar, el nuevo panel se asegura de que se muestren todas las cuadrículas definidas en una página. Si bien la cuadrícula real no es visible en un sitio web, Firefox muestra las columnas y filas individuales, así como los posibles huecos, lo que facilita a los desarrolladores encontrar su camino dentro de la cuadrícula.

Puede llegar al panel de diseño accediendo a las herramientas de desarrollo y cambiando al inspector. Allí, ubicará el panel de diseño. Para cada elemento de la cuadrícula, hay un botón que muestra la cuadrícula del elemento respectivo. En la ventana del navegador, las líneas de la cuadrícula se colocan en la parte superior del diseño, resaltando la cuadrícula que definió mediante CSS-Grids.

El ráster también se muestra en el propio panel. Al mover el mouse sobre dicho ráster, se resalta la fila respectiva tanto en el inspector como en la ventana del navegador.

Mostrar números de fila le facilita la ubicación de celdas específicas de la cuadrícula. Las líneas de cuadrícula infinitas opcionales extienden las líneas de la cuadrícula más allá del elemento de cuadrícula respectivo. Esto puede ser útil y molesto, por lo que ocultar y mostrar esta opción tiene sentido.

Nombrar y mostrar áreas de cuadrícula

El atributo CSS «áreas de cuadrícula» le permite nombrar áreas dentro de su cuadrícula, agrupándolas en algún tipo de grupo. Todas las células con la misma etiqueta se convierten en un grupo.

grid-template-areas:
  "header header header header"
  "nav content content content"
  "footer footer footer footer";

La opción «Mostrar áreas de la cuadrícula» muestra estas áreas de la cuadrícula en la ventana del navegador. Aquí, las áreas individuales se resaltan dentro de la cuadrícula, usando una línea más gruesa. Además, se muestra la etiqueta respectiva del área.

Si mueve el mouse a través de una celda de la cuadrícula en el panel de diseño, no solo la celda sino también el área a la que está asignada se resaltará en el navegador.

Las transformaciones se tienen en cuenta

Gracias al atributo CSS «transform», las rotaciones, escalas y distorsiones de elementos son posibles. También se pueden aplicar a un elemento de cuadrícula. El inspector considera todos los cambios realizados a través de «transformar» y ajusta la cuadrícula en consecuencia.

Esto significa que, cuando se trata de un elemento de cuadrícula girado, la cuadrícula en sí también se gira.

Conclusión

El nuevo panel de diseño en el inspector de Firefox le ayuda a comprender y desarrollar mejor sus diseños de cuadrículas CSS. El resaltado de una línea de cuadrícula y la numeración lo ayudan a colocar elementos, así como a obtener una impresión visual de la cuadrícula.

Aquí, se están considerando todas las opciones, como los espacios entre las celdas de la cuadrícula y la división en áreas. En general, el nuevo panel deja una buena impresión. Solo debería ser una cuestión de tiempo hasta que se establezca el nuevo diseño de cuadrícula, por lo que esta nueva función seguramente será de gran ayuda para muchos desarrolladores web.

Actualmente no está claro cuándo el nuevo panel de diseño llegará al Firefox normal. Pero si quieres jugar con él por un tiempo, puedes descargar la versión Nightly. Como esta no es una versión madura, solo debe usarla con fines de desarrollo y no en un entorno de producción.

#Control #total #sobre #las #cuadrículas #nuevo #panel #diseño #Firefox #para #cuadrículas #CSS

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.