Cómo construir diseños complejos usando CSS

Feb 3, 2026

Cómo

[dieciséis]

El diseño para la web siempre ha sido limitado, nunca ha habido nada realmente dedicado a hacer que el contenido sea fácil de mostrar en un formato que tenga sentido.

De vuelta en los años 90 cuando la web se apoderó de los diseñadores que se utilizaron para poner el contenido en una cuadrícula, encontró que la única forma de obtener el mismo resultado en el navegador era usar la tabla. Fusión de células llevó al complejo. Diseños de sitios web , Pero esto jugó estragos con accesibilidad y SEO. Avance rápido y hoy en día Hay todo tipo de formas de colocar contenido con flotadores, cajas flexibles, etc.

CSS3 realmente ha presionado las capacidades de la web hacia adelante y desde 2014 ha habido Diseño de cuadrícula CSS . Actualmente, actualmente cuenta con un 75 por ciento de apoyo del navegador, por lo que está llegando al punto en que es hora de darle una consideración seria. Fundación 6 de Zurb's Foundation Se ha puesto a bordo y está usando eso para alimentar su cuadrícula.

Este tutorial se centrará en la creación de una función de estilo de revista que le mostrará cómo perfeccionarlo. diseño web adaptable Para tamaños de pantalla media y pequeña.

Descarga los archivos tutoriales aquí.

01. Comienza

Abra el archivo 'grid1.html' de la carpeta de inicio en el Archivos de proyecto . El diseño HTML para esto tiene cinco etiquetas DIV, simplemente nombrado Item1-5 como clases CSS. Estos serán el contenido colocado en la cuadrícula. El envoltorio del contenedor esto definirá la cuadrícula, que tendrá cuatro columnas.

 & lt; div clase = "contenedor" y gt;
  & lt; div clase = "item1" & gt; item 1 & lt; / div & gt;
  & lt; div clase = "item2" & gt; item 2 & lt; / div & gt;
  & lt; div clase = "item3" & gt; item 3 & lt; / div & gt;
  & lt; div clase = "item4" & gt; artículo 4 & lt; / div & gt;
  & lt; div clase = "item5" & gt; item 5 & lt; / div & gt;
& lt; / DIV & GT;

02. Marque CSS para la cuadrícula

Mirar en la sección de la cabeza Puede ver que se le ha dicho que se le ha dicho el "contenedor" como una cuadrícula, con una altura automática para las filas, mientras que las columnas se deben establecer a cuatro con cada juego al 25 por ciento del navegador . Marque esto en el navegador y verá que cada elemento se le asigna automáticamente la siguiente posición de cuadrícula disponible.

 .container {
  Mostrar: Grid;
  Plantilla de cuadrícula: filas: Auto;
  Plantilla de cuadrícula-columnas: Repetir (4, 25%); }

03. Defina las posiciones de la cuadrícula.

Ahora eche un vistazo al archivo 'grid2.html'. Es lo mismo que el primer archivo, excepto 'Item1' y 'Item2' reciben posiciones específicas. La primera se coloca en la fila 1 y termina antes de la fila 2. La columna comienza a 1 y termina a las 3, por lo que abarca dos columnas. El segundo comienza en la columna 3 y toma las siguientes dos columnas. Los artículos restantes llenan las siguientes ranuras de cuadrícula disponibles.

 .item1 {
  START-START-START: 1;
  Fila de cuadrícula: 2;
  Inicio de la columna de cuadrícula: 1;
  Grid-column-Fin: 3;
}
.item2 {
  START-START-START: 1;
  Fila de cuadrícula: 2;
  Inicio de la columna de cuadrícula: 3;
  Rejilla-columna-End: 5;
}

04. Usa una plantilla de cuadrícula

Abre 'grid3.html' y mira el cuerpo del html. Verá que hay un diseño con un encabezado, barra lateral, sección de contenido principal y un pie de página. Puede agregar más texto al contenido para ver qué sucede cuando se coloca. La cuadrícula utilizará una función de plantilla para hacer estas secciones en un diseño.

 & lt; div clase = "contenedor" y gt;
  & lt; div clase = "encabezado" & gt; encabezado & lt; / div & gt;
  & lt; div class = "sidebar" & gt; sidebar & lt; / div & gt;
  & lt; div clase = "contenido" & gt; contenido & lt; / div & gt;
  & lt; div class = "footer" & gt; footer & lt; / div & gt;
& lt; / DIV & GT;

05. Definir la plantilla.

Mira el CSS para el contenedor. Se define de nuevo como una cuadrícula. La fila superior será de 200px de altura, el medio será de tamaño automático y la última fila será 100px de altura. Las columnas están configuradas en 33 por ciento de ancho y para automáticamente el resto. La plantilla dice que el encabezado llenará ambas columnas. La siguiente fila será la barra lateral en la primera columna y el contenido en el siguiente. El pie de página pasa a ambos.

 .container {
  Mostrar: Grid;
  Plantilla de cuadrícula: filas: 200px AUTO 100PX;
  Plantilla de cuadrícula-columnas: 33% Auto;
  Áreas de plantilla de cuadrícula:
  "Encabezado de encabezado"
  "Contenido de la barra lateral"
  "pie de página de página"; }

06. Vincular la plantilla a la clase.

Para vincular la clase a la plantilla, el código que se muestra aquí define esto. Cada área de la cuadrícula se nombra y se crea el enlace. El contenido no se muestra aquí, pero está en el documento 'Grid3.HTML'. Mire esto en el navegador para ver el diseño de la cuadrícula. Debido a que se definen dos columnas, la plantilla necesita dos áreas en cada una de las comas invertidas.

 .HEADER {
  Área de cuadrícula: encabezado;
}
.sidebar {
  Área de cuadrícula: barra lateral;
}
.footer {
  Área de cuadrícula: pie de página; }

07. Hacerlo respondido

Para que la respuesta "grid3.html", se inserta una consulta de medios y la fila superior se mantiene en un 200 por ciento, mientras que las filas restantes serán de tamaño automáticamente. Solo hay una columna, el ancho completo, por lo que la plantilla tiene una palabra en cada coma invertida para definir el diseño. Estos se pueden reordenar fácilmente sin cambiar a cualquiera de los HTML.

 Pantalla @Media y (Max-Anchth: 699px) {
  .envase {
  Mostrar: Grid;
  PLAZA DE PIEL: FILACIONES: 200PX AUTO;
  Plantilla de cuadrícula-columnas: 100%;
  Áreas de plantilla de cuadrícula: "encabezado" "APARTAMENTO" "CONTENIDO" "PEADER";
  }
}

08. Trabajar en un diseño real.

Ahora abre 'index.html': todo el HTML para el contenido ya se ha creado, al igual que algunos de los CSS para los elementos de diseño. Agregue esta cuadrícula a las etiquetas de estilo en la sección de la cabeza. Hacerlo crea una cuadrícula de tres columnas con la plantilla para cada sección. Tenga en cuenta la parada completa para las secciones de cuadrícula vacías.

 .Container1 {
  Ancho: 80%;
  Margen: 0 Auto;
  Mostrar: Grid;
  Plantilla de cuadrícula: filas: Auto;
  Plantilla de cuadrícula-columnas: 33.3% 33.3% Auto;
  Áreas de plantilla de cuadrícula: "Encabezado de encabezado de encabezado" ". Standfirst Standfirst" ".. Artículo 1" "Focus Pullquote Pullquote" "Artículo 2 Artículo 2.";
}

09. Enlazar la plantilla.

Al igual que con el paso anterior, esto vincula el encabezado con la plantilla. Se le indica al encabezado que abarque las tres columnas de la cuadrícula, luego el standfirst está configurado para tomar dos columnas y tener una columna vacía a la izquierda. Si comprueba el navegador, esa columna se llena porque el contenido restante automáticamente ofrece el siguiente espacio disponible: sin embargo, no hará esto cuando se configura.

 .HEADER {
  Área de cuadrícula: encabezado;
}
.standfirst {
  Área de cuadrícula: Standfirst;
}

10. Añadir las siguientes áreas.

Ahora, el primer artículo, la cita de tracción y la imagen de enfoque se colocan en el diseño. La cotización de pull y la imagen están de lado a lado en la misma fila. En esta etapa, no se ha colocado Artículo 2, por lo que está tomando el primer espacio disponible en la cuadrícula que está al lado de la parada.

 .article1 {
  Área de cuadrícula: Artículo 1;
}
.pullquote {
  Área de cuadrícula: pullquote;
}
.atención {
  Área de cuadrícula: enfoque;
  Text-alinec: Centro; }

11. Termina la primera cuadrícula.

Agregar el segundo artículo CSS permite que toda la primera cuadrícula se coloque correctamente. Mirar esto en el navegador mostrará que el diseño funciona con la imagen de fondo y crea el tipo de diseño visto en revistas, donde el diseñador trabaja alrededor de una gran imagen de fondo.

 .article2 {
    Área de cuadrícula: Artículo 2;
    Columna-GAP: 65px;
    Cuenta de columna: 2;
}

12. Añadir un fondo blanco

Antes de comenzar la segunda cuadrícula, puede preguntarse por qué hay una necesidad de dos cuadrículas. La razón es que esta cuadrícula va a tener un fondo blanco de ancho completo para que este CSS envuelva la segunda cuadrícula. Esto es para dar esta sección la sensación de una segunda página en el diseño.

 .whitebg {
    relleno: 100px 0;
    Color de fondo: #ddd;
}

13. Hacer una segunda cuadrícula.

La segunda cuadrícula es más sencilla que la primera. Hay tres columnas, con una altura automática en las filas. El contenido va a llenar una columna cada una para que no haya necesidad de definir las áreas de la plantilla. Sin embargo, cuando se agrega el diseño de la tableta, esto debe cambiar a dos columnas, por lo que se requiere un reflujo y los nombres serán importantes.

 .container2 {
    Ancho: 80%;
    Margen: 0 Auto;
    Mostrar: Grid;
    Plantilla de cuadrícula: filas: Auto;
    Plantilla de cuadrícula-columnas: 33.3% 33.3% Auto;
    Áreas de plantilla de cuadrícula: "IMG1 img2 artículo3";
}

14. Añadir las columnas

Se dice que cada una de las clases CSS en la segunda cuadrícula se vincule con la columna relevante, como se define en la plantilla de la cuadrícula. El color del texto del texto se cambia solo para que se destaque en el fondo más claro de esta sección. Con solo el pie de página para completar, el diseño del diseño del estilo de la revista está casi en su lugar.

 .img1 {
  Área de cuadrícula: IMG1;
}
.img2 {
    Área de cuadrícula: IMG2;
}
.article3 {
  Área de cuadrícula: Artículo 3;
  Color: # 333;
}

15. Perfecto el pie de la página.

La finalización de la página colocará un DIV de ancho completo a través de la pantalla, que se llenará con un color negro y el texto está centrado. Esto completa la versión de escritorio del diseño, pero mueva la pantalla hacia abajo debajo de 1200px de ancho y el sitio comienza a romperse.

 .footer {
    Color de fondo: # 000;
    Color: # 999;
    Text-alinec: Centro;
    relleno: 50px 20px 100px;
}

16. Ajuste para el diseño de pantalla media.

Aquí se inserta una consulta de medios para cuidar el diseño cuando el ancho del navegador es inferior a 1200px. El código para los pasos 17 y 18 se colocará dentro de los soportes donde está el comentario. Este será un caso de cambiar la "estructura de diseño de las cuadrículas.

 Pantalla @Media y (Max-Anchth: 1200px) {
  / * Código aquí * /
}

17. Refluir la primera cuadrícula.

La primera cuadrícula está configurada para completar el ancho completo del navegador con solo dos columnas en lugar de tres. El orden de las secciones se coloca en la plantilla, con los artículos que cambian de lado, ya que esto encaja mejor con la imagen de fondo en este tamaño de pantalla.

 .Container1 {
  Ancho: 100%;
  Plantilla de cuadrícula: filas: Auto;
  Plantilla de cuadrícula-columnas: 50% 50%;
  Áreas de plantilla de cuadrícula: "encabezado de encabezado" "Standfirst Standfirst" "Artículo 1". "Pullquote pullquote" "ARTICULTY FOCUS";
  }
.Artículo 2 {
  Cuenta de columna: 1;
  }

18. Prueba tu diseño

La segunda cuadrícula también se redimensiona para tomar el ancho completo del navegador y se agregaron dos columnas. Las imágenes se colocan lado a lado en la fila sobre el texto para que se ajuste perfectamente en la pantalla. Puede probar este diseño en el navegador cambiando el tamaño del tamaño de su navegador por debajo del ancho de 1200px.

 .container2 {
  Ancho: 100%;
  Margen: 0 Auto;
  Plantilla de cuadrícula: filas: Auto;
  Plantilla de cuadrícula-columnas: 50% 50%;
  Áreas de plantilla de cuadrícula: "img1 img2" "Artículo 3 Artículo 3";
}

19. Tweak Design para Mobile

Cualquier navegador que tenga un ancho de menos de 769px obtendrá el código que se agrega en los pasos finales. Todo lo que debemos hacer aquí es asegurarse de que cada una de las cuadrículas tenga un diseño de una sola columna para que el contenido se pueda ver correctamente dentro del espacio más pequeño.

 Pantalla @Media y (Max-Anchth: 768px) {
  / * Código de pasos finales aquí * /
}

20. Marque la cuadrícula de una sola columna

Ahora, la primera cuadrícula se establece en una sola columna del 100 por ciento del ancho del navegador y el orden de las secciones se agrega en las áreas de la plantilla. Compruebe cómo la primera parte de la página está trabajando en pantallas móviles.

 .Container1 {
  Ancho: 100%;
  Plantilla de cuadrícula: filas: Auto;
  Plantilla de cuadrícula-columnas: 100%;
  Áreas de plantilla de cuadrícula: "encabezado" "Standfirst" "Artículo 1" "Pullquote" "FOCUS" "Artículo 2";
}

21. Terminar el diseño.

Aquí, también se hace la segunda cuadrícula para llenar una sola columna y se define el diseño de las secciones. Ahora guarde el diseño terminado y vénelo a través de pantallas de diferentes tamaños para ver la capacidad de diseño completo de la cuadrícula CSS y lo fácil que fue simplemente reordenar el contenido para diferentes anchos.

 .container2 {
  Ancho: 100%;
  Margen: 0 Auto;
  Plantilla de cuadrícula: filas: Auto;
  Plantilla de cuadrícula-columnas: 100%;
  Áreas de plantilla de cuadrícula: "img1" "img2" "Artículo3";
}

Este artículo se publicó originalmente en Creative Web Design Magazine Web Designer. Comprar Número 271 o suscribir .

Artículos relacionados:

5 consejos para CSS super rápido
Entendiendo la propiedad de visualización de CSS
Cómo crear un diseño de pirámide con formas CSS

Cómo construir diseños complejos usando CSS

01. Comienza

02. Marque CSS para la cuadrícula

03. Defina las posiciones de la cuadrícula.

04. Usa una plantilla de cuadrícula

05. Definir la plantilla.

06. Vincular la plantilla a la clase.

07. Hacerlo respondido

08. Trabajar en un diseño real.

09. Enlazar la plantilla.

10. Añadir las siguientes áreas.

11. Termina la primera cuadrícula.

12. Añadir un fondo blanco

13. Hacer una segunda cuadrícula.

14. Añadir las columnas

15. Perfecto el pie de la página.

16. Ajuste para el diseño de pantalla media.

17. Refluir la primera cuadrícula.

18. Prueba tu diseño

19. Tweak Design para Mobile

20. Marque la cuadrícula de una sola columna

21. Terminar el diseño.

Cómo - Artículos más populares

Comienza con Artrage

Cómo dibujar figuras más realistas

Cómo cambiar la fuente en su bio de Twitter

5 maneras de aumentar el SEO de su sitio web

Cómo eliminar un fondo en Photoshop

6 maneras de acelerar su modelado

4 pasos para mejor VDM con ZBrush

Agregue señales visuales a su sitio

Categorías