Construye un blog con cuadrícula y FlexBox

Sep 13, 2025
Cómo
Build a blog with Grid and flexbox
[dieciséis]

Los últimos dos o tres años han visto un diseño avanzando a pasos y límites. Ahora que estas técnicas modernas tienen un resultado tan consistente en los navegadores modernos, realmente puede usarlos para su código de producción. Si te estas preguntando Cómo iniciar un blog Este tutorial le mostrará lo simple que es crear un diseño estándar de estilo de blog utilizando la cuadrícula CSS y el módulo de caja flexible, también conocido como FlexBox. ¿Suena como un trabajo demasiado duro para lo que quieres? Eche un vistazo a nuestra guía a la Las mejores plataformas de blogs gratuitas. o elige un top Creador de sitios web . ¿Trabajando con un equipo? Desplegar lo mejor almacenamiento en la nube Para mantener el proceso suave.

Primero vamos a repetir rápidamente los conceptos básicos de HTML y por qué es bueno probar y escribir código semántico.

Más que escritorio y móvil.

¿Ha notado el modo de lector en Safari y Firefox? Es un icono en la barra de direcciones que se parece un papel alineado. Esto hará que su Diseño de sitio web En un modo de huesos sin distracción, sin ánimo, como dispositivos como el uso de Apple Watch. Cada vez más dispositivos acceden y muestran contenido web, posiblemente el gran éxito de la Navidad fue los altavoces interactivos como el ECHO de Amazon.

Con estos en mente, y por supuesto la necesidad de que su sitio trabaje en lectores de pantalla y similares, la estructura de su página es crucial. Si solo usas & lt; div & gt; Para todos sus contenedores e incluso los botones, los dispositivos que representan su código no sabrán cuál es el contexto, por lo que no puede usar ninguna de las funciones o características nativas.

01. Iniciar diseño de página básica

Vamos a construir una página web básica para incluir un encabezado con navegación, un bloqueo de héroe, artículo principal, aparte de los bloques de artículos y un pie de página. La idea aquí es ver muchos. diseño web adaptable Técnicas que podemos implementar sin utilizar las consultas de medios o cualquier asistente de JavaScript. Puede ver que el HTML de la página se divide en secciones distintas utilizando las etiquetas HTML5. También agregamos clases, ya que los navegadores mayores no sabrán lo que son y los hacen como un DIV. Comencemos en la parte superior de la página y a través de nuestro camino. Sin embargo, básico o complejo su sitio, también es hora de pensar en qué Alojamiento web El servicio es adecuado para usted.

02. Construir un encabezado del sitio

[sesenta y cinco]

[dieciséis] No necesitará ningún envoltorio o contenedores para este encabezado.

El encabezado del sitio contiene un logotipo y una lista desordenada para la navegación. No necesitamos agregar ninguna envoltura o contenedores para poner esto con el logotipo a la izquierda y la navegación a la derecha en una sola línea. 

 & lt; encabezado clase = "encabezado" y gt;

& lt; img src = "images / logo.png" / & gt;
& lt; nav & gt;
& lt; ul class = "nav" & gt;
& lt; li & gt; & lt; un href = "#"
clase = "activo" & gt; home & lt; / a & gt; / li & gt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; sobre & lt; / a & gt; / lt; / li & gt; / li & gt;
& lt; li & gt; & lt; a href = "#" & gt; los perros & lt; / a & gt; / li & gt; / li & gt;
& lt; li & gt; & lt; un href = "#" & gt; contacto & lt; / a & gt; / li & gt; / li & gt;
& lt; / ul & gt;
& lt; / nav & gt;
& lt; / encabezado & gt;

03. Usa la unidad FR.

Colocamos el encabezado para mostrar la cuadrícula, luego usar 'Get-template-colums' para establecer dos columnas en el encabezado. Utilizamos el fr La unidad aquí, que es una unidad fraccional - 1fr sería igual al espacio disponible en el contenedor. En este caso, estamos dando la navegación un área ligeramente más pequeña para llenar. 

 encabezado {
Pantalla: Grid;
Plantilla de cuadrícula-columnas: 1.5FR 1FR;
Alinee-Artículos: Centro;
}

04. Añadir la navegación del sitio

Ahora nos dirigimos a la lista de elementos del menú. Otra vez volvemos el & lt; ul & gt; en un recipiente de cuadrícula y indique los artículos dentro de AutoFit en columnas. Aquí usamos mínimo máximo Para garantizar que las columnas nunca puedan ser más pequeñas que 100px, pero si el espacio es más grande, puede compartir el espacio como 1FR cada una. 

 .NAV {
Pantalla: Grid;
Plantilla de cuadrícula-columnas: Repetir (Auto-FIT, Minmax (100px, 1fr));
Grid-Gap: 10px;
Alinee-Artículos: Centro;
}

05. Crea bloqueo de héroe.

Build a blog with Grid and flexbox: Hero block

[dieciséis] Centrar el texto del héroe es mucho más fácil con la cuadrícula CSS o FLEX

La siguiente parte de la página es el principal bloque de héroe. Tradicionalmente, el texto centrado verticalmente en un contenedor requería todo tipo de trabajos. Usando la cuadrícula CSS o FLEX, esto es realmente simple. 

 & lt; article & gt;
& lt; sección clase = "héroe" y gt;
& lt; h1 & gt; & lt; / h1 & gt;
& lt; p & gt; & lt; / p & gt;
& lt; un href = "" & gt; & lt; / a & gt;
& lt; / Sección y GT;
& lt; / Artículo & gt;

06. Alinearse al centro.

Alinear en dos ejes es una parte del pan y la mantequilla de la cuadrícula CSS. Aquí, podemos convertir al contenedor de héroe en un recipiente de cuadrícula y luego usar alineado (de izquierda a derecha) y justificar contenido (arriba a abajo) para posicionar en el centro. Estamos usando un vh Unidad aquí, que hará que el héroe bloquee el 50% de la altura de la vista. 

 .Hero {
Min-altura: 50vh;
Pantalla: Grid;
Justify-Artículos: Centro;
Alinee-Contenido: Centro;
Justify-Contenido: Centro;
}

07. Crea la sección del contenido principal.

El artículo principal también tiene un bloque a la derecha que contiene más lectura. Para que esto responda sin tener que hacer uso de una consulta de medios, podemos cambiar a FlexBox para aprovechar al máximo sus propiedades. 

 & lt; Artículo clase = "Contenido principal" y GT;
& lt; sección / & gt;
& lt; / Sección y GT;
& lt; aparte / & gt;
& lt; / Artículo & gt;

08. Añadir una vista de dos columnas

Establezca el artículo a un contenedor FLEX. Agregue un pequeño acolchado a la izquierda y hacia la derecha para asegurarse de que la medida del texto no tiene demasiado tiempo. La dirección FLEX es la fila para que la sección y aparte, aparte, se sienta una al lado de la otra al estilo. El contenido está justificado al espacio entre el texto, para que el texto no se reúna contra el Aparte. 

 Contenido principal {
PANTALLA: FLEX;
Flex-Wrap: Wrap;
Dirección Flex: Fila;
Justify-Contenido: espacio entre ellos;
relleno: 0 5VW 0 5VW;}

09. Hacer que responda sin consultas de los medios.

Build a blog with Grid and flexbox: Responsive without media queries

[dieciséis] Crear una sección receptiva sin tener que usar consultas de medios.

La sección utiliza una mezcla inteligente de calc y anchos mínimos y máximos para darnos lo que es efectivamente una consulta de medios, pero a un nivel de contenedor. Cuando hay suficiente espacio, la sección ocupará el 70% del padre, lo que le permitirá a un lado se sentará a su lado. Al usar Calc para el ancho, podemos devolver un ancho enorme o pequeño. 

 Sección de contenido principal {
Min-ancho: 70%;
Ancho: Calc ((48EM - 100%) * 1000);
Max-ancho: 100%;
}

10. Definir un punto de ruptura

48EM Equipa a 768px (48 * Tamaño de fuente de base (16px)) por encima de 768px La sección será su ancho mínimo del 70% y por debajo de 768 se utilizará el ancho máximo. Hacemos lo mismo para que aparte, así que, en este caso, ocupará un 25% en pantallas grandes o 100% en pequeñas. El efecto es un punto de ruptura sensible que afecta puramente al contenedor. 

 .Main-contenido a un lado {
Ancho mínimo: 25%;
Ancho: Calc ((48EM - 100%) * 1000);
Max-ancho: 100%;
}

11. Construir bloques sensibles

Build a blog with Grid and flexbox: Responsive blocks

[dieciséis] Use divis de contenedores para construir sus bloques de respuesta

Para crear los elementos destacados que se extienden a través de la página, finalmente usamos nuestros primeros divectores de contenedores. 

 & lt; Sección Class = "Lista de tarjetas" & GT;
& lt; div clase = "tarjeta" & gt;
& lt; img / & gt;
& lt; div clase = "Detalles de la tarjeta" & gt;
& lt; / DIV & GT;
& lt; / DIV & GT;
& lt; / Sección y GT;

12. Repetir y autofit.

Para nuestra lista de tarjetas queremos tener cuatro seguidos, pero como no estamos utilizando ninguna consulta de medios que establecemos nuestro mínimo máximo Valor a 300px, que encajará muy bien en un pequeño móvil. Al usar Repetir y AutoFIT, el navegador hace el trabajo duro y se ajustará a lo que puede entrar en una fila y luego iniciará otro, para que podamos pasar de cuatro a un diseño de una sola columna con una línea de código. 

 Lista de tareas {
Pantalla: Grid;
Grid-Gap: 10px;
Polonia de cuadrícula-columnas: Repetir (Auto-FIT,
Minmax (300px, 1fr));
}

.tarjeta {
 Mostrar: Grid;
 Plantilla de cuadrícula-columnas: 1FR;
}

13. Crea un diseño de tarjeta.

Para los detalles en la tarjeta, volvimos a FLEX, configurando el flujo a columna para que los elementos fluyan verticalmente. Selecciona el justificar contenido propiedad para adaptarse - en este caso espacio-uniformemente funciona bien. Debido a que la etiqueta 'A' en este panel mostrará el bloque, estiraría el ancho del contenedor. Ponerlo a arranque flexible para que solo ocupe el espacio de su contenido. 

.Detalles de tarjeta {
PANTALLA: FLEX;
Dirección Flex: Columna;
Justify-Contenido: Espacio, uniformemente;
}

.card-detalles a {
alineno-yo: inicio flexible;
}

14. Estilo el pie de página.

Ya estamos hasta el pie de página, y solo podremos emplear algunos de los estilos que hemos usado anteriormente para ponerlo. 

 & lt; footer class = "footer" & gt;
& lt; p / & gt;
& lt; nav & gt;
& lt; ul class = "nav" & gt;
& lt; li / & gt;
& lt; / ul & gt;
& lt; / nav & gt;
& lt; ul class = "social" & gt;
& lt; li / & gt;
& lt; / ul & gt;
& lt; / footer & gt;

15. Alinee el artículo del niño.

Hay tres áreas en este pie de página. Ajuste sus columnas de cuadrícula para repetir tres en una unidad fraccionada cada una. Simplemente puede escribir 'PLATILLIZA DE CUERDO-COLUMNAS: 1FR 1FR 1FR;' si tu prefieres. Los iconos sociales se quedarán alineados con la derecha, puede hacerlo contando el propio artículo para alinear el derecho usando justificar-uno mismo . 

 .footer {
Pantalla: Grid;
Plantilla de cuadrícula-columnas: Repetir (3, 1 FR);
Grid-Auto-Flow: Columna;
Alinee-Artículos: Centro;
}

.social {
Justify-yo: End;
}

16. Considerar la compatibilidad.

Aunque este tutorial funciona bien a través de los grandes tres navegadores y los dispositivos modernos, no ha sido probado de nuevo a IE. Dependiendo de su proyecto, puede usar la mejora progresiva y cumplir con un diseño simple. Si su CSS se crea con un preprocesador como SASS, el paquete AutoPrefixer proporciona algunos de los prefijos adicionales necesarios para los "gustos como Borde.

Este artículo se publicó originalmente en el número 284 de la revista Creative Web Design Design Diseñador web . Comprar emito 284 aquí o Suscríbete al diseñador web aquí .

Artículos relacionados:

  • Una guía integral para usar la cuadrícula CSS.
  • Use CSS Grid y FlexBox para construir una interfaz sensible
  • 5 Generadores de rejilla CSS frescos

Cómo - Artículos más populares

Tres pasos para un cielo nocturno brillante en acuarela

Cómo Sep 13, 2025

[dieciséis] La acuarela es un medio increíble que, con la derecha. Técnicas de arte Se puede utilizar para hacer las imá..

Construye tu propio juego de física webgl

Cómo Sep 13, 2025

[dieciséis] Este proyecto se dividirá en diferentes partes. Daremos una breve introducción a Heroku, muestre cómo usar Physijs con ..

Crea una ducha de meteoros en 3DS MAX

Cómo Sep 13, 2025

[dieciséis] Si desea hacer una ducha de meteorito 3D para una escena o un proyecto, puede hacer fácilmente una ducha de meteorito fot..

Agregue señales visuales a su sitio

Cómo Sep 13, 2025

[dieciséis] Es molesto que los usuarios del sitio web hagan clic en un enlace solo para encontrar que la página web no es de interés..

Pintura maestra negativa en acuarela

Cómo Sep 13, 2025

La pintura negativa se refiere a pintar el espacio negativo Eso define formas positivas. Esto es especialmente importante con la acuarela tradicional, donde la pintura las cosa..

¿Qué hay de nuevo en Angular 4?

Cómo Sep 13, 2025

[dieciséis] Página 1 de 2: Pasos 1-10 Pasos 1-10 Pasos 11-20..

Edad de una fotografía en Photoshop CC

Cómo Sep 13, 2025

[dieciséis] Envejecer una fotografía en Photoshop es una técnica clásica que puede volverse incluso una imagen a todo color Ho-Hum,..

Crea copias digitales de calidad de tu arte

Cómo Sep 13, 2025

El arte no se trata solo de crear, también se trata de compartir. Una vez que haya hecho un hermoso trabajo, está orgulloso, es natural que quiera que otros también lo vean. Hay varias for..

Categorías