Hay tantos recursos de CSS excelentes en Internet. Pero, ¿qué pasa si solo desea un diseño simple y lo desea AHORA?
En este artículo, describo los 5 diseños de páginas web más comunes y cómo construirlos usando Flexbox y Grid.
¿Cómo funcionará esto?
Hay un enlace debajo de cada diseño para el código HTML y CSS completo en CodePen.
Tenga en cuenta que estoy usando SASS para componer definiciones de estilo, por lo que si desea hacer lo mismo en su local, instale SASS usando:
npm i sass -g Plantilla de tarjeta básica
Utilicé la tarjeta anterior como base del diseño de la página web. Está compuesto por tres elementos en dirección vertical, por lo que los divbloques normales funcionarían bien. Sin embargo, más adelante tendré que estirar el elemento intermedio, el párrafo de texto.
Aquí, tanto Flexbox como Grid hacen el trabajo sin problemas. Prefiero Flexbox porque es más sencillo para mí.
Ganador: Flexbox
CodePen Flexbox, CodePen Grid
Ahora comencemos a crear nuestros diferentes diseños.
# 1 Tarjeta centrada vertical y horizontalmente
Con Flexbox, necesitamos un elemento que se centre horizontalmente y otro (el elemento hijo) que se centre verticalmente.
El orden de los artículos está definido por flex-direction. La forma en que el elemento se posiciona en el espacio disponible se establece align-selfen el elemento o align-itemsen su padre.
Con Grid, necesitamos tres columnas y tres filas. Luego colocamos la tarjeta en la celda del medio.
El centrado horizontal es sencillo. Definimos tres columnas y sus tamaños usando grid-template-columns: auto 33% autoya que la tarjeta debe ser tan ancha como 1/3 del área visible.
El problema es que no conocemos las dimensiones verticales. Queremos que las filas superior e inferior ocupen el espacio restante que no es posible con la cuadrícula. La tarjeta está centrada, pero su altura depende de la altura de la ventana.
Sin embargo, podemos resolver esto con un elemento envolvente adicional alrededor de la tarjeta y centrarlo usando margin.
Ganador: Flexbox
CodePen Flexbox, CodePen Grid
# 2 Dos cartas centradas vertical y horizontalmente
A menudo, necesitamos centrar más de un elemento. Estas dos tarjetas también deben mantener la misma altura si una u otra contiene texto más largo.
Con Flexbox, necesitamos envolver ambas tarjetas en otro elemento y usarlo para centrar ambas tarjetas a la vez.
No podemos usar align-itemsaquí ya que se aplica al eje Y en este caso. Tenemos que definir cómo el espacio restante en el eje X debe ser distribuido con justify-content: center. Eso asegura que ambas tarjetas estén centradas horizontalmente.
Si omitimos el problema de altura variable de Grid, podemos lograr el mismo resultado incluso sin ningún elemento de envoltura adicional. Esta vez definimos la cuadrícula con cinco columnas con grid-template-columns: auto 33% 50px 33% auto. El resto permanece igual que en el ejemplo anterior.
Ganador: Flexbox
CodePen Flexbox, CodePen Grid
# 3 Varias tarjetas con el mismo ancho y alto
Este es otro caso de uso típico para blogs, sitios de comercio electrónico o, en general, cualquier sitio que muestre algún tipo de listado. Queremos que las tarjetas tengan el mismo ancho y alto. La altura debe inferirse del elemento más grande de la lista.
Esto se puede hacer en Flexboxusando flex-wrap: wrap. Los elementos pasarán a la siguiente línea si su ancho excede el espacio restante de cada línea. Sin embargo, la misma altura solo se conserva en el alcance de una sola línea, a menos que la defina explícitamente.
Cuadrículamuestra su verdadero poder aquí. Este diseño se puede crear usando el grid-auto-rows: 1frcual aplica la misma altura en todas las filas.
Ganador: Grid
CodePen Flexbox, CodePen Grid
# 4 Alternar texto e imágenes centrados vertical y horizontalmente
En este ejemplo, tenemos texto con botones de CTA acompañados de una imagen en el otro lado. Ambos componentes deben estar centrados verticalmente, ya que su tamaño puede variar.
Esto es pan comido para Flexbox. Cada fila es un articleelemento dividido en dos contenedores de envoltura .imgy .content. Son necesarios para una distribución uniforme del tamaño ( flex-basis: 50%).
El centrado vertical del contenido interior está definido por align-items: center.
La alternancia se logra invirtiendo la dirección de Flexbox flex-direction: row-reverseen cada artículo impar.
Cuadrículatambién maneja bien este caso de uso. No necesitamos definir una cuadrícula gigante, sino una para cada uno article.
Define columnas igualmente anchas que están centradas verticalmente usando align-items: center.
La alternancia se define a nivel de celda mediante valores conmutados para grid-column.
Ganador: empate
CodePen Flexbox, CodePen Grid
# 5 Encabezado horizontal con menú
Para lograr este diseño usando Flexbox, ambos lados del encabezado deben estar representados por un solo elemento.
El logotipo y el nombre de la empresa forman uno anchora la izquierda, y el menú es un solo navelemento a la derecha. Flexbox los coloca con justify-content: space-between.
Con Grid, necesitamos dos columnas: una para el logotipo y otra para el menú. El menú es otra cuadrícula que distribuye uniformemente el tamaño de las columnas grid-template-columns: repeat(4, minmax(0, 1fr)).
El problema aquí es que si queremos agregar otro elemento al menú, también necesitamos ajustar el CSS.
Ganador: Flexbox
CodePen Flexbox, CodePen Grid
Y el ganador es...
La puntuación final es 5: 2 a favor de Flexbox, pero esto no significa que se convierta en el mejor ganador de CSS. Hay situaciones en las que es necesario utilizar uno u otro, a veces incluso ambos juntos, para lograr lo que necesita.
Si necesita un posicionamiento flexible y condicional, use Flexbox. Si desea crear listados o estructuras similares que requieran elementos de igual tamaño o tengan forma de tabla, use Grid.
Como desarrollador front-end, no se saldrá con la suya sin conocer ambos.
Guía de referencia Flexbox, Guía de referencia Grid
PD Si me perdí un diseño que usas a diario, avísame en Twitter y prepararé una secuela :-)