Viejas demos con CSS Grid Layout inside 11.4.17

Viejas demos con CSS Grid Layout inside

La llegada de una herramienta tan potente y versátil como CSS Grid Layout es una disculpa tan buena como cualquier otra para revisar viejas demos (en su momento alguna entraba en la categoría de #impoCSSible).

El objetivo de volver la vista atrás y trabajar lo ya hecho es doble:

1. Aprender experimentando con CSS Grid Layout
2. Ver las diferencias más significativas entre el CSS usado en su momento (el que estaba disponible) y el construirlas con lo más nuevo.

El primer punto requiere tiempo y dedicación.
Del segundo, a poco que nos pongamos a jugar, resaltan dos:

1. Estructura del DOM o marcado HTML menor. Lógico. CSS Grid Layout crea divisiones dentro del elemento grid sin necesitar marcado HTML extra.
2. A menos elementos HTML interfiriendo menos necesidad de reglas CSS y más libertad creativa.

Y para ilustrar esto nada como tomar alguna vieja demo, rehacerla aplicando CSS Grid Layout y comparar. Vamos con dos.

Tabs p pestañas con CSS Grid Layout

Son infinidad de artículos dedicados en el blog a los sistemas de pestañas o tabs en puro CSS construidas muchas de ellas con la técnica del :checked. Esto es, usando input type='radio'´s ocultos y a sus label´s como pestañas. y mostrar el contenido en función de cuál input pulsemos (checked

See the Pen Modern Tabs with CSS Grid Layout by Kseso (@Kseso) on CodePen.

¿Echamos un vistazo a los códigos? ¿Sí?. Bien, comencemos por el marcado html.

<div class='card'> <input class='hide' type="radio" id="tab-1" name="tractor"/> <label for='tab-1'>Tab 1</label> <article class='tab-1'> <!-- el contenido que se oculta o muestra --> </article> <input class='hide' type="radio" id="tab-2" name="tractor"/> <label for='tab-2'>Tab 2</label> <article class='tab-2'> <!-- el contenido que se oculta o muestra --> </article> ... </div>

Creo que nada reseñable en este marcado. Excepto, quizás, que en cada grupo de input | label | article hay concordancia en el valor del atributo id | for | class.

Vamos con el CSS relativo a la ubicación de cada elemento.

Lo primero es construir la grilla en el div class='card'.

/* The grid*/ .card { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 2; grid-template-areas: "t-1 t-2 t-3 t-4" "uno uno uno uno"; }

grid-template-columns: repeat(4, 1fr) cuatro columnas, tantas como pestañas usadas y todas de igual de anchura.
grid-template-rows: 2 Sólo necesitamos dos filas, una para las pestañas o tabs y otra para el contenido que se muestra.
grid-template-areas para colocar cada pestaña y el contenido utilizando el nombre de cada área.

En caso de ser más o menos pestañas habrá que cambiar el '4' de la función CSS repeat(4, 1fr) y en la propiedad grid-template-areas añadir o quitar tantos 't-n' y 'uno' como sean necesarios.

Ocultamos el contenido por defecto y mostramos aquél cuya pestaña se selecciona:

[class*='tab-'] { opacity: 0; max-width: 0; max-height: 0; display: flex; flex-direction: columns; flex-wrap: nowrap; align-items: center; } :checked + label + [class*='tab-'] { background: #fff; opacity: 1; max-width: 100%; max-height: 100vh; animation: show 1s; }

Todo lo relativo a los tamaños /max-width/heigth) es para la pequeña animación al mostrarse el seleccionado. Podríamos elegir otra técnica o hasta prescindir de todo, animación incluida y usar en su lugar display: none/ flex

Para ubicar cada una de las pestañas (los labels) y el article que se muestra en la rejilla que hemos creado con CSS Grid Layout:

[for*='-1'] { grid-area: t-1; } [for*='-2'] { grid-area: t-2; } [for*='-3'] { grid-area: t-3; } [for*='-4'] { grid-area: t-4; } :checked + label + article { grid-area: ver; z-index: 1; }

El uso dela propiedad grid-area en cada uno es debido al tipo de marcado HTML elegido. Podríamos prescindir de ellas alterando el DOM: escribiendo al inicio todos los input y sus label y a continuación los cuatro article´s.

input label for input label for . . . article article . . .

Ello conllevaría tener que modificar los selectores para ocultar y mostrar el contenido

#tab-1:checked ~ .tab-1, #tab-2:checked ~ .tab-2, #tab-3:checked ~ .tab-3, #tab-4:checked ~ .tab-4 {}

Nada cambia, excepto a la hora de añadir pestañas (y su contenido asociado) tener que añadir reglas [for*='-5'] {} o añadir el selectores #tab-5:checked ~.tab-5

Todo CSS Grid Layout

Y para terminar una pequeña variación de los códigos anteriores para una realización totalmente diferente: una lista de tareas (todo list) y su funcionamiento al marcarlas como hechas o pendientes de hacer.

See the Pen Todo list in CSS Grid Layout by Kseso (@Kseso) on CodePen.

Como el código CSS más significativo está algo comentado creo que te será fácil comprender para qué y qué hace cada regla.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso