4 cosas que no sabías sobre Grid CSS

by Janeth Kent Date: 03-06-2022 css grid subgrid layout diseño

Durante mucho tiempo, el CSS no contenía un gran número de sorpresas. Desarrollándose a un ritmo tranquilo, el lenguaje se conformaba con estilizar sus fuentes y hacer flotar sus divs, mientras que lenguajes como JavaScript hacían el trabajo pesado.

Sin embargo, en los últimos años, el CSS ha vivido un etapa de renovación en la que su grupo de trabajo del W3C le ha dado un papel mucho más importante en el panorama del desarrollo moderno. Ya sea que esté creando diseños responsivos, animaciones meticulosamente diseñadas o construyendo componentes de píxeles perfectos, CSS ahora tiene una potencia renovada. Pero si bien esto le brinda un conjunto de herramientas completamente nuevo a la hora de diseñar los sitios web, significa que es fácil perderse en el proceso de desarrollo.

En este artículo queremos enseñaros algunos trucos.

Crear layout con Grid Css es simple!

Vale, probablemente es mejor asumir que mucha gente ya haya recibido este mismo mensaje. Pero, el grid es una forma muy práctica de diseñar páginas web. En primer lugar, la configuración de la cuadrícula inicial es muy sencilla. ¿Queréis crear una sencilla plantilla (grid) de 12 columnas para empezar a diseñar vuestros divs y componentes principales? Todo lo que tenéis que hacer es decirle al grid que repita 12 columnas, siendo cada una de ellas una fracción igual de la cuadrícula:

.example-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

Y en lugar de volvernos locos con los floats, la colocación de elementos es muy rápida. Supongamos que queréis una div el centro de vuestro sitio, dejando dos columnas de espacio en blanco a cada lado, de nuevo el código no podría ser más sencillo:

.example-div {
  grid-column: 3 / 11;
}


Antes de definir la posición del contenido, el grid CSS lo colocará automáticamente en filas o columnas, lo que facilita la visualización de los elementos que se van a utilizar. CSS grid deducirá el número de filas y columnas que el grid debería tener a partir de los valores máximos de fila de cuadrícula y columna de cuadrícula que ha utilizado.

Grid no se parece en nada a las tablas HTML

Cuando surge algo nuevo, siempre habrá gente dispuesta a criticar el cambio. El grid de CSS no es una excepción; ciertamente fue recibido por una buena parte de los detractores, que afirmaban que es sólo un recalentamiento de la vieja y anticuada práctica de presentar sitios con tablas HTML.

En los oscuros y antiguos tiempos del diseño web, las cuadrículas basadas en tablad eran algo inflexibles. En el momento en que un desarrollador necesitaba que dos elementos de las celdas adyacentes se solaparan, se veía obligado a descomponer y guardar el contenido como imágenes estáticas.

El grid CSS no sólo permite apilar y solapar elementos, sino que también permite hacerlo de forma flexible y responsiva: en lugar de fijar los diseños en la "piedra", se puede utilizar para determinar con exactitud cómo responden los elementos y cómo se posicionan.

Subgrid añade una capa completamente nueva a los layouts.

Si las tablas HTML son el pasado oscuro y distante y el grid es el presente, el subgrid es el futuro. El grid sólo llega hasta cierto punto - el grid de un padre afecta a sus hijos pero los nietos no lo heredan. Y aunque se puede colocar un nuevo grid dentro del principal, no se adhiere a las filas y columnas de los padres, lo que lleva al tipo de trabajo de diseño desordenado que se creía que se había dejado atrás hace mucho tiempo.

Afortunadamente, el subgrid resuelve este problema, lo que significa que, si lo deseamos, los diseños pueden ser puesto en un grid durante todo el proceso. Gracias al hecho de que se ajustan a las propiedades establecidas por sus grids padres, se pueden crear fantásticos diseños con un nivel de control muy preciso.

CSS rompe los diseños tipográficos fijos

Otro gran secreto de CSS es la flexibilidad con la que maneja la tipografia y los idiomas. Si queremos utilizar idiomas que se escriben de derecha a izquierda, podemos usar simplemente la propiedad 'direction: rtl;' para que aparezcan como es debido. Alternativamente, digamos que queremos que las líneas de nuestro párrafo sean giradas 90 grados en el sentido de las agujas del reloj, podemos usar writing-mode: vertical-rl; - o writing-mode: vertical-lr si queremos que nuestra primera línea aparezca a la izquierda con cada línea subsiguiente más a la derecha.

Aunque el soporte sigue siendo mixto tanto para `vertical-rl' como para `vertical-lr'', estos ingeniosos fragmentos de CSS merecen ser tenidos en cuenta a la hora de añadir mejoras a nuestras webs.

 
by Janeth Kent Date: 03-06-2022 css grid subgrid layout diseño visitas : 5895  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Artículos relacionados

Nuevas unidades de ventana gráfica - CSS

'Intercop 2022' es un proyecto anunciado por Google, Microsoft, Apple y la fundación Mozzilla para que todos los navegadores ofrezcan la misma experiencia web. El proyecto tiene 15 áreas de enfoque…

Container queries: libera el poder de escribir media queries

El diseño web responsivo ha sido una práctica común durante años, permitiendo que los sitios se adapten y se vean bien en una variedad de dispositivos y tamaños de pantalla.…

¿Por qué no deberíamos usar el color negro?

A día de hoy es cada vez más frecuente que las páginas cuenten con la opción de ponerlas en modo oscuro, o que directamente basen su estética en los colores…

Utilidades de los selectores :where y :is

Si aún no has oído hablar de estos selectores de pseudoclases, no te preocupes, aquí te explicamos el funcionamiento y dejamos varios usos que nos pueden ser muy útiles a…

Cómo centrar un Div con CSS - 10 formas diferentes

Para los desarrolladores web, a veces centrar un div parece uno de los trabajos más difíciles del mundo. Pues ya no. En este artículo, aprenderás 10 formas diferentes de centrar un…

Como hacer tu propio cursor personalizado para tu web

Cuando empecé a ojear webs distintas y originales para aprender de ellas, de las primeras cosas que me llamaron la atención fue que algunas de ellas tenían sus propios cursores,…

Explorando la API CSS Paint: Redondeo de formas parte 2

Vamos con la segunda parte de nuestro artícul sobre como manejar la API Paint para redondar bordes complejos   Control de los radios   En todos los ejemplos que hemos visto, siempre consideramos un…

Explorando la API de CSS Paint: Redondeo de formas parte 1

Añadir bordes a las formas complejas es un auténtico rollo (a veces), pero redondear las esquinas de las formas complejas es un suplicio jejeje. Por suerte, la API de pintura…

Las ventanas gráficas o viewports grandes, pequeñas y dinámicas

Recientemente se han introducido algunos cambios en materia de unidades de ventana gráfica o viewport. Las novedades -que forman parte de la especificación de valores y unidades CSS de nivel 4-…

Imágenes de fondo responsivas con relación de aspecto fijo o fluido

¿Cuál es la forma más fácil de escalar las imágenes de fondo en los diseños responsivos? Utilizamos una antigua técnica y la mejoramos para cambiar con fluidez la ratio de…

Comenzando con Bootstrap-Vue paso a paso

Hoy te mostraremos cómo usar BootstrapVue, describiremos el proceso de instalación y mostraremos la funcionalidad básica. El proyecto está basado en el framework CSS más popular del mundo - Bootstrap, para…

Bootstrap 5 beta2. ¿Qué ofrece?

Dado que el lanzamiento de Bootstrap 4 es de tres años, en este artículo vamos a presentar lo que es nuevo en el marco más popular del mundo para la…

Clicky