Completando el Sistema de Grillas

Clase 28 de 41 • Curso de HTML y CSS 2019

Juan Diego Silva Garcia

student•

Para evitar copiar todo el código de manera repetida, podemos utilizar este selector de atributos:

[class*="col-"] { /* selecciona los atributos class cuyos valores tenga una subcadena col-*/
  padding: 10px;
}

Sebastián Córdoba

student•

Gracias por el aporte

Pablo Verduzco

student•

Gran manera de manejar los selectores, muchas gracias 😁

Ernesto Vizcaíno Alvarado

student•

Codigo para copiar

.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12 ```

Juan Diego Silva Garcia

student•

Se puede utilizar este selector:

[class*="col-"] { /* selecciona los atributos class cuyos valores tenga una subcadena col-*/
  padding: 10px;
}

Matias Cariboni

student•

Para quien le sirva

Me he encontrado con algunos problemas y quizá alguno de ustedes le ha pasado lo mismo.

Para empezar, cuando agreguemos una nueva columna tal y como está el código, al menos en mi caso las columnas comienzan a apretarse entre ellas para caber en la misma fila, eso se soluciona facil, en el elemento flex se agrega flex-flow: wrap

.row {
    display: flex;
    flex-flow: wrap;
}

El problema es cuando intentamos bajar a la segunda fila de columnas, por ejemplo, si genero 2 contenedores de col-6, en teoría cada columna debería ocupar el 50% del container. Pero no, la segunda columna se cae a la siguiente fila.

Por que?: Porque si bien cada col-6 ocupa la mitad del container de row (450px cada columna), el profe ha agregado un padding de 10px a cada lado. Esto hace con que las columnas sumen 10px más de cada lado y sus anchos sean de 470px cada una, y asi ya no caben en el row.

Por que al profe no le sucede esto? Porque en la clase anterior cuando multiplica los procentajes de las columnas, se equivoca y cuando multiplica la tercera se come un decimal por eso cuando va por la sexta columna no le cierran los 50% clavados y al final no llega al 100%. Esto le da un margen que a simple vista quizá no se note, y permite que los bordes puedan coexistir en el sistema de grilla.

Como lo solucione? Dándole muchas vueltas, he encontrado una solución en otro curso de platzi. Hay una propiedad que le indica a los contenedores que no pueden exceder el width que le hemos dado, por lo que el padding ocupa espacio hacia adentro del div apretando el contenido y no hacia afuera desalineando todo el sistema de grillas, esta pripiedad se agrega en los flex items afectados y se llama box-sizing: border-box

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{
    padding: 10px;
    box-sizing: border-box;
}```

Diego Alfonso Najera Ortiz

student•

Excelentes observaciones

Manuel Entrena Jimenez

student•

Muchas gracias, justo volví hacia atrás porque tenia ese mismo problema y usted me salvo.

maximiliano Vai

student•

Estructura visual de las grillas.

contenido para el CSS

.container{
    max-width: 900px;
    margin: auto;
    
}


/*sistemad de 12 columnas*/
.col-1 { width:  8.333333333% }
.col-2 { width: 16.666666666% }
.col-3 { width: 24.999999999% }
.col-4 { width: 33.333333333% }
.col-5 { width: 41.666666666% }
.col-6 { width: 49.999999999% }
.col-7 { width: 58.333333333% }
.col-8 { width: 66.666666666% }
.col-9 { width: 74.9999999999% }
.col-10{ width: 84.333333333% }
.col-11{ width: 92.66666666% }
.col-12{ width: 100% } 

.col-1,.col-2 ,.col-3 ,.col-4 ,.col-5 ,
.col-6 ,.col-7 ,.col-8 ,.col-9 ,.col-10,.col-11,.col-12 {
    padding: 5px;
    border: 1px solid;
}

contenido para el body

&lt;main class=&quot;container&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-1&quot;&gt;hola&lt;/div&gt;
          &lt;div class=&quot;col-1&quot;&gt;hola&lt;/div&gt;
          &lt;div class=&quot;col-1&quot;&gt;hola&lt;/div&gt;
          &lt;div class=&quot;col-1&quot;&gt;hola&lt;/div&gt;
          &lt;div class=&quot;col-1&quot;&gt;hola&lt;/div&gt;
          &lt;div class=&quot;col-1&quot;&gt;hola&lt;/div&gt;
          &lt;div class=&quot;col-1&quot;&gt;hola&lt;/div&gt;
          &lt;div class=&quot;col-1&quot;&gt;hola&lt;/div&gt;
          &lt;div class=&quot;col-1&quot;&gt;hola&lt;/div&gt;
          &lt;div class=&quot;col-1&quot;&gt;hola&lt;/div&gt;
          &lt;div class=&quot;col-1&quot;&gt;hola&lt;/div&gt;
          &lt;div class=&quot;col-1&quot;&gt;hola&lt;/div&gt;
         &lt;/div&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-2&quot;&gt;hola&lt;/div&gt;
          &lt;div class=&quot;col-2&quot;&gt;hola&lt;/div&gt;
          &lt;div class=&quot;col-2&quot;&gt;hola&lt;/div&gt;
          &lt;div class=&quot;col-2&quot;&gt;hola&lt;/div&gt;
          &lt;div class=&quot;col-2&quot;&gt;hola&lt;/div&gt;
          &lt;div class=&quot;col-2&quot;&gt;hola&lt;/div&gt;
          
         &lt;/div&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-3&quot;&gt;hola&lt;/div&gt;
          &lt;div class=&quot;col-3&quot;&gt;hola&lt;/div&gt;
          &lt;div class=&quot;col-3&quot;&gt;hola&lt;/div&gt;
          &lt;div class=&quot;col-3&quot;&gt;hola&lt;/div&gt;
         &lt;/div&gt;&lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-4&quot;&gt;hola&lt;/div&gt;
          &lt;div class=&quot;col-4&quot;&gt;hola&lt;/div&gt;
          &lt;div class=&quot;col-4&quot;&gt;hola&lt;/div&gt;
         &lt;/div&gt;&lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-5&quot;&gt;hola 5&lt;/div&gt;
          &lt;div class=&quot;col-5&quot;&gt;hola 5&lt;/div&gt;
          &lt;div class=&quot;col-2&quot;&gt; 2 columnas&lt;/div&gt;
         &lt;/div&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-6&quot;&gt; 6 agrupadas&lt;/div&gt;
          &lt;div class=&quot;col-6&quot;&gt;6 agrupadas&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-7&quot;&gt; 7 agrupadas&lt;/div&gt;
          &lt;div class=&quot;col-5&quot;&gt; 5 agrupadas&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-8&quot;&gt;8 columnas agrupadas&lt;/div&gt;
          &lt;div class=&quot;col-4&quot;&gt;4 columnas agrupadas&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-9&quot;&gt;9 columnas agrupadas&lt;/div&gt;
          &lt;div class=&quot;col-3&quot;&gt;3 columnas agrupadas&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-10&quot;&gt; 10 columnas agrupadas&lt;/div&gt;
          &lt;div class=&quot;col-2&quot;&gt; 2 columnas agrupadas&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-11&quot;&gt;11 columnas agrupadas&lt;/div&gt;
          &lt;div class=&quot;col-1&quot;&gt;1 columna&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-12&quot;&gt;12 columnas agrupadas&lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;row&quot; &gt;
        
        &lt;/div&gt;
    &lt;/main&gt;

Jonathan Garcia Centurion

student•

al usar grid en css es mucho mejor ya que puedes definir columnas y filas sin tanto codigo.

Display: grid;

Gabriel Chorens

student•

Totalmente de aucerdo. Me pregunto por que no ponen eso, ni tantas otras cosas... Pesima colocacion de este curso en la ruta de aprendizaje de arquitectura frontend

Jonathan Garcia Centurion

student•

Si, supongo que quiso dar a entender como funciona la grilla de bootstrap pero se olvido decirlo, supongo que el profe olvida mencionar detalles.

Juan Carlos García Esquivel

student•

El código escrito en la clase es el siguiente:

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, 
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
  padding: 10px;
}

Se entiende que es para que se aprenda desde cero, aunque hay formas más eficientes de obtener el mismo resultado.

Este es el caso de los Selectores de atributo, estos selectores de CSS aplican estilos a elementos en función de la presencia o el valor de un atributo determinado ejemplos :

/* elementos <a> con un atributo de título */
a[title] {
  color: purple;
}

/* elementos <a> con un href que contenga "example" */
a[href*="example"] {
  font-size: 2em;
}

tomando en cuenta lo anterior podemos indicarle a CSS que aplique estilos a cualquier elemento que tenga el atributo class y que esa clase contenga el texto "col-", como se muestra a continuación:

 [class*='col-'] {
    padding: 10px;
  }

Con el código anterior tenemos el mismo resultado pero mas eficiente. Ahora les comparto mi grid completo :)

:root {
    --col-width: 8.33333333333%;
  }
  .container {
    max-width: 900px;
    margin: auto;
  }
  
  .row {
    display: flex;
  }
  
  .col-1 {
    width: var(--col-width);
  }
  
  .col-2 {
    width: calc(var(--col-width) * 2);
  }
  
  .col-3 {
    width: calc(var(--col-width) * 3);
  }
  
  .col-4 {
    width: calc(var(--col-width) * 4);
  }
  
  .col-5 {
    width: calc(var(--col-width) * 5);
  }
  
  .col-6 {
    width: calc(var(--col-width) * 6);
  }
  
  .col-7 {
    width: calc(var(--col-width) * 7);
  }
  
  .col-8 {
    width: calc(var(--col-width) * 8);
  }
  
  .col-9 {
    width: calc(var(--col-width) * 9);
  }
  
  .col-10 {
    width: calc(var(--col-width) * 10);
  }
  
  .col-11 {
    width: calc(var(--col-width) * 11);
  }
  
  .col-12 {
    width: calc(var(--col-width) * 12);
  }
  
  [class*='col-'] {
    padding: 10px;
  }
  
  @media (max-width: 900px) {
    .row {
      display: inherit;
    }
  
    [class*='col-'] {
      width: 100%;
    }
  }

Más info de los selectores de atributos Aquí

Alejandro Guevara

student•

Pero cuando pruebo tu código, no respeta las otras colum, en el ejemplo pone Soy un Ocho y Soy un 4 y se ve un espacio, pero con el código se pone juntos como si fuera uno después de otro

Juanes Sánchez

student•

Me parece mucho más interesante y sencillo utilizar CSS Grid layout. Recomiendo muchísimo ese curso.

Maria Alejandra Carrero

student•

sip, con grid evitamos escribir tanto codigo

Angel David Castiblanco Sepulveda

student•

Una forma muy sencilla es manejando CSS Grid, aqui comparto el condigo en una versión simplificada:

.container {
    max-width: 900px;
    margin: auto;
}
.row {
    display: grid;
    grid-template-columns: repeat(6, 16.33%);    
    grid-gap: 10px;
}
@media screen and (max-width:900px) {
    .row {
        display: inherit;
    }
}

Bastian Besoain

student•

Increíble forma de simplificar el código. Funciona completamente.

Me queda la duda sobre el atributo "grid" que usas.

Un saludo.

Diego Alvaro Parra Abad

student•

Como dato adicional, para añadir atributos a varias clases que comiencen por el mismo nombre podrían trabajar con la siguiente sintaxis, espero que los pueda ayudar:

/* Regla que aplica para todas las clases que comienzan con &quot;col-&quot; */
div[class^='col-'] {
    padding: 10px;
}```

Alejandro Tangarife Rivas

student•

Esto es una explicación completa sobre Sistema de Grillas

El sistema de grillas o (mayor mente conocido) como ‘grid layout’ , es la manera para dividir una página o contendor… en sectores o pedazos, como quieran llamarlo :D.

Ejemplo Tienes una hoja de papel en blanco, y la quieres dividir en recuadros, teniendo en cuenta el 100% de la hoja, lo que haces es coger tu regla y medir para ver cómo quedarán divididos los sectores, puedes hacer cuadros iguales (dividiendo el 100% de la hoja en partes iguales) o hacer cuadros diferentes (dividiendo el 100% de la hoja en tamaños distintos).

Entonces, digamos que la hoja mide 1000cms, y quieres sacar 4 lados, entonces mides 1000cms entre 4 (1000/4 = 250cms) entonces cada cuadro lo haces de 250cms, y te quedará una grilla de 4 columnas de partes igules que llenan el 100% de la hoja.

En css pasa exactamente lo mismo. Tomas el 100% de la pantalla y lo divides entre 12 (8.3%) esto viene siendo un 1/12. Pero digamos que quieres que en la pantalla(hoja) hayan 4 cuadros que ocupen el 100% del contenedor, entonces lo que haces es (dividir 100% entre 4 = 25%), listo, ahí tienes tu grilla de 4 columnas que van a ocupar entre todas el 100% del contenedor.

pd:Ten muy en cuenta que HTML es exactamente lo mismo que una hoja de papel, y CSS es si diseño(colores, cuadros, dibujos, etc…).

Espero haberles ayudado, éxitos!

Ediberto Rodriguez

student•

SUper clase

Alexander Valencia

student•

seeeee

Alberto Castro Flores

student•

Esta clase fue grabada cuando no existia CSS grid 🤔?

Sneyder Barreto

student•

¡Hola! No realmente. Supongo que el profe lo explicó de la manera en que funcionan algunos frameworks de CSS. Sin embargo, si ya sabes usar CSS Grid, no dudes en usarlo. Un saludo.

Alberto Castro Flores

student•

ok gracias

Eduardo Andrés Mejías Azuaje

student•

Por qué le colocamos a .row display:inherit y no display:block ?

David Behar

student•

El display:inherit resetea el display al default del navegador, para este caso en particular display:inherit === display:block

Angelo Zambrano

student•

El valor inherit; hereda el mismo valor del padre.

Sí .container tiene display: flex y le colocamos al hijo display: inherit, va a ser el mismo valor del padre, o sea display: flex.

Fernando Molano Castrillón

student•

Pues yo, en vez de crear todas las 12 columnas, use display grid con sus propiedades para ahorrar tiempo, código y sobre todo lograr que los elementos vayan bajando de a uno y no todos en una fila larga.

.container {
  max-width: 900px;
  margin: auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.col-2 {
  background-color: blueviolet;
  flex: 1 1 100px;
  margin: 10px;
  justify-content: center;
}
.row-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 60% 40%;
  grid-template-areas: 8-col 4-col;
}
.col-8 {
  background-color: aqua;
  grid-area: 8-col;
}
.col-4 {
  background-color: cadetblue;
  grid-area: 4-col;
}
.col-2,
.col-8,
.col-4 {
  text-align: center;
  color: white;
  padding: 10px;
}

@media (max-width: 900px) {
  .row-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .col-8,
  .col-4 {
    flex: 0 1 150px;
    margin: 5px;
  }
}

José Ricardo Casallas

student•

Se denomina sistema de grillas a una estructura conformada por líneas verticales y horizontales que se intersectan. En el diseño web.

Boris Hilmar Encinas Manjon

student•

Todo el CCS @media (max-width:900px) { .row{ display: inherit; } .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{ width: 100%;

}

Ronald Jesús García Villanueva

student•

Excelente, sencillo y super bien explicado!

Arturo José Báez Uribe

student•

Esta bueno, asi se entiende mejor para los principiantes como funciona el sistema de columnas de Bootstrap

Aunque lo veo mejor hacerlo con CSS Grid

Alejandro Guevara

student•

Yo siempre pongo background para cada etiqueta contenedora para ver como afecta las propiedades css que pongo. No se si estará bien hacer eso.

Andres Condo

student•

Si la etiqueta contenedora son diferente entre si, no debería afectar en nada a las demás etiquetas, pero como sugenerencia antes de darles estilos algo, dibujalo, se que suena aburrido, pero no se necesita ser un genio o un artista. Esto te ayudara mucho a saber cuantos contenedores vas a crear y que se le va aplicar a cada uno. Y si te das cuenta que hay mas de un contenedor con el mismo estilo bien podrías hacerlo uno solo, de esta manera: HTML

<nav class=" contanier">
<footer class="container-2">

CSS

.container, .contanier-2
{
	background:#fff;
}

Puedes darle el mismo background a dos o a todos los que que les quieras aplicar el mismo background, y te ahorraras muchas lineas de código y tiempo

Juan Sebatian López Muñoz

student•

Yo también hago lo mismo, siento que es una buena practica

MATTHEUV OSORIO CARDONA

student•

Me quedo con CSS GRID LAYOUT no toca duplicar cosas, hay funciones para repetir y abreviar la construcción de las filas y las columnas

Completando el Sistema de Grillas

Internet

¿Dónde aprender HTML y CSS modernos?

Pasos para aprender HTML y CSS

¿Qué conocimientos necesito para tomar este curso?

¿Cómo se construye la tecnología web?

¿Cómo instalar ATOM?

Comprendamos Internet

Los básicos del web

¿Cómo funciona HTML?

Etiquetas y sus atributos

Reto 1: crea tu fiesta de gifs

¿Cómo funciona CSS?

¿Cómo funciona JavaScript?

Hola mundo y estructura del proyecto

Listado de las etiquetas más usadas

Construcción de un producto digital

Paper wireframe

¿Cómo instalar XD?

Diseño de interfaces

Maquetación de la NavBar

Maquetación de main_section y agregando estilos CSS

Maquetación de tarjetas de producto

Fuentes personalizadas y variables de CSS

Categorizando etiquetas según nuestra estructura en HTML

Reto 2: Maquetar el home del producto digital

Reglas responsive

Animaciones y transiciones

Integrando otras herramientas

Atributos especiales de las etiquetas para mejorar el funcionamiento de nuestros formularios

Librería vs Framework

Sistema de Grillas

Completando el Sistema de Grillas

Reto 3: implementación del sistema de grillas

Maquetación del formulario

Creación de formulario: inputs

Creación de formulario: botones

¿Cómo crear tu cuenta en Paypal?

Configuración del botón de pago con Paypal

Autofill del formulario de PayPal

Maquetación de pantalla de éxito y error

Deploy

Testing con el Navegador

Cómo crear tu cuenta en Github

Subiendo nuestro proyecto a Internet con Github

Conclusión

Conclusiones

Bonus

Librería vs Framework