Sistema de Grillas

Clase 27 de 41 • Curso de HTML y CSS 2019

Resumen

Los sistemas de grillas nos ayudan a configurar el espacio y tamaño de nuestros elementos. En este caso, vamos a separar nuestra grilla en 12 posibles tamaños, así que debemos realizar la operación 100/12 y multiplicar el resultado por cada posible tamaño de nuestra grilla.

.col-1 {
        width: 8.3333333333%;
}
.col-2 {
        width: 16.6666666666%;
}
.col-3 {
        width: 24.9999999999%;
}
...

Juan Carlos García Esquivel

student•

El curso esta super cool, les comparto mi grid :)

: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);
}

Con calc() puedes realizar cálculos para determinar valores de propiedades CSS, con esta función sólo defino el ancho de una columna y la multiplico para calcular los demás porcentajes. mas info sobre calc acá calc

SEBASTIAN PADUANO

student•

muy buena esa, me ha gustado.

Juan Carlos García Esquivel

student•

Gracias @soypaduano 😀.

Juan Castro

teacher•

Para Layouts mucho más avanzados y profesionales tenemos el Curso de CSS Grid de Platzi 💚🎉.

Aarón González

student•

¡Ese curso es increíble! Me sirvió mucho para mejorar mi marco de trabajo :D

Emmanuel García

student•

Quieres aprender Grid en unos minutos y ademas divertirte. Me ayudo mucho y ahora lo comparto a ustedes Click aquí. También esta para flexbox Click aquí

Aarón González

student•

Hola @emmaisworking :D

He probado la herramienta, está súper. Gracias por el aporte

Exal Rodríguez

student•

Gracias x el aporte!

Alexander Moreno

student•

el calculo lo hice con la funcion calc()

Marco Vinicio González Jiménez

student•

Perfecto que buena solución ya lo apliqué también, gracias.

Matías Wasiak

student•

Muchísimas gracias, mucho más fácil y practico que el método dado en el vídeo!

Mauro Alejandro García Larios

student•

Hola a todos, espero éste pequeño aporte les sea de utilidad.

Si en CSS a la la clase “.row” le cambiamos el display de “flex” a “grid” basta con indicar que quieres 6 columnas en tu grilla y que sean de una fracción “grid-template-columns: repeat(6, 1fr)” para lograr el mismo resultado que el profesor:

.row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

También es importante mencionar que es de mucha ayuda entender como es que Rulótico diseñó la grilla desde cero ya que así es la metodologia de Bootstrap de las 12 columnas y entendiendo ésta manera de hacer la grilla se comprende con más facilidad y mayor rapidez Bootstrap. De mi parte prefiero utilizar CSS Grid ya que es una especificación directa para layout, en el curso de "CSS Grid" Leonidas enseña a usar la grilla de CSS, está muy bueno el curso y no es largo.

CHRISTIAN LOPEZ LINDAO

student•

Gracias amigo

Manuel Rivera

student•

Yo quede todo perdido , pense que iba a hacerlo como en el curso de css-grid.

Ernesto Vizcaíno Alvarado

student•

Aqui estan todas las columnas para que las copien

.col {
    width: auto;
}
.col-1 {
    width: 8.3333333333%;
}
.col-2 {
    width: 16.6666666666%;
}
.col-3 {
    width: 24.9999999999%;
}
.col-4 {
    width: 33.3333333332%;
}
.col-5 {
    width: 41.6666666665%;
}
.col-6 {
    width: 49.9999999998%;
}
.col-7 {
    width: 58.3333333331%;
}
.col-8 {
    width: 66.6666666664%;
}
.col-9 {
    width: 74.9999999997%;
}
.col-10 {
    width: 83.333333333%;
}
.col-11 {
    width: 91.6666666663%;
}
.col-12 {
    width: 100%;
}```

Wilson Marino Pablo Mendez

student•

Una observación… La columna 6 a ley tendría que dar 50%

Ernesto Vizcaíno Alvarado

student•

Cierto gracias no me había dado cuenta 👍

Juan Esteban Galvis

student•

Me pareció super raro ese sistema de columnas jajaja con css grid debería ser más fácil hacer:

Display: grid; Grid-template-column: 1 fr 1 fr 1 fr 1 fr 1 fr 1 fr 1 fr 1 fr 1 fr 1 fr 1 fr 1 fr ;

Osea divida el espacio en 12 columnas. Ese es mi aporte sobre lo que se y he utilizado css grid.

JUAN SEBASTIAN RODRIGUEZ JIMENEZ

student•

También pensé lo mismo, pero creo, no estoy seguro, que algunos cursos de leonidas se grabaron antes que este curso y hay otros cursos también de leonidas que se grabaron después de este curso.

Ian Vassallo

student•

Son maneras diferentes de llegar a un resultado. Estp sigue siendo matemáticas después de todo <3 jajaja

CRISTIAN BARBERO PÉREZ

student•

Para no calcularlo a mano se puede utilizar la función de CSS calc. Me imagino que además tendrá más precisión ya que no se pierden decimales.

.col-1{
    width: calc(100%/12);
}
.col-2{
    width: calc(100%/6);
}
.col-3{
    width: calc(100%/4);
}
.col-4{
    width: calc(100%/3);
}
.col-5{
    width: calc(100%/12*5);
}```

CARLOS ALBERTO COMBITA

student•

Bueno, esta solución es mucho mejor.

Alexander Valencia

student•

Cuando dijo grillas pensé en esto !grilla

David Antonio Garcia Saaib

student•

Grid responsive papá, con grid layout

Juan Diego Silva Garcia

student•

Estas dos extensiones de Chrome te pueden ayudar a construir exctamente tu sitio web con un sistema de grids:

Grid Ruler: Esta herramienta te perimite visualizar el tamaño de las grids en pixeles y asi posicionar de manera más intuitiva cada uno de los grids. Funciona igual que las reglas de photoshop: grid ruler

Design Grid Overlay: Esta extensión muestra el sistema de grids con sus mediciones, sus anchos de canal y se puede configurar para frameworks populares de Frontend como Bootstrap o Fundation: Design Grid Overlay

Kevin Alejandro Tovar Lamilla

student•

Para que sea mas fácil y rápido, no se podría usar una propiedad del flex (como justify-content:space-between;) y dejar todas las columnas con el mismo porcentaje?? el resultado seria el mismo.

Martín Bustamante

student•

Una pregunta, no sería mejor hacerlo con CSS grid layout?

Bernardo Ayala Montezuma

student•

En teoría sí sería más sencillo y además tendrías después más flexibilidad en el comportamiento responsive.

Pero al Grid Layout tener tanta complejidad creo que fue buena idea dejarlo para un curso a parte donde se enfoquen solamente en él.

Si ya sabes como utilizar Grid Layout te animo a que hagas este mismo sistema de grillas así, como práctica está genial 😀.

Luis Lira

student•

Sí, es más sencillo. Pero también muchas veces que hay que saber cómo funcionan algunas cosas aunque sea de forma básica en lugar de dejarlo como si fuera "magia".

Carlos Rodrigues

student•

Para ahorrarse muchas lineas de código, pueden hacer algo así:

.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: 8.3%;
}```

Alejandro Tangarife Rivas

student•

Compadre, Muy creativa tu idea :)! Pero no es funcional :(, pues le está dando la misma medida a todas las columnas, y la idea es que cada clase tenga valores distintos ascendendes

Michelle Verano

student•

Sinceramente , me estaba gustado mucho el curso, hasta que llegue a este punto, vi los videos que le siguen esperando que cambiara la manera como escribe el codigo, pero no lo hace, la ventaja de usar GRID, es que no tenemos que hacer justamente lo que esta haciendo el profesor con el código. insisto, el curso es muy buen, el profesor sensacional, pero este punto en especifico sobre los GRID me dejo con mucho que desear.

Manuel Durán

student•

entiendo tu frustracion :( espero que comprendas que este es mas que nada un introductivo a html y css. Es como la teoria fundamental de lo que es una grilla. Si comprendes bien esto, cuando llegues a display: grid; Se vuelve super fácil de comprender :)

Manuel Durán

student•

y en el fondo esto esta clase esta mas diseñada para familiarizarte con la metodologia de bootstrap (por las 12 columnas.) Grid funciones sus usos distintas y si, en realidad es mas versatil.

Santi Dalmasso

student•

Con CSS Grid...

.container{
    max-width: 900px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(6,16.66%);
}

.item{
    display: flex;
}```

Manuel Durán

student•

que clashe de brujeria he esho!? :O

Isai Fernandez

student•

Aprender en Platzi es todo un paseo!

Usuario anónimo

user•

Los sistemas de grillas nos ayudan a configurar el espacio y tamaño de nuestros elementos. En este caso, vamos a separar nuestra grilla en 12 posibles tamaños, así que debemos realizar la operación 100/12 y multiplicar el resultado por cada posible tamaño de nuestra grilla.

.col-1 { width: 8.3333333333%; } .col-2 { width: 16.6666666666%; } .col-3 { width: 24.9999999999%; } ...

Pedro Edison Rios Pino

student•

siento que el profesor no toma muy a fondo cada tema, pero lo hace de una manera muy sencilla y dinámica

Ismael Grimaldo Vega

student•

Hay un curso dedicado a este sistema de grid. Te invito a que le eches un vistazo, ahí lo puedes practicar y entender con varios ejercicios. Acá te dejo el enlace: https://platzi.com/clases/css-grid-layout/

Juan Moisés Pastén Castillo

student•

Pienso exactamente lo mismo de todo los cursos de Platzi. Creo que aquí llegas a pulirte o a saber que algo existe, pero no a aprender desde 0

Raul Zarza

student•

cual es la diferencia entre esta opcion y usar CSS Grid?

Ivan Sevilla

student•

Gustos. A mi me gusta usar mas CSS Grid

Roger Carlos Ariel Alba

student•

Hola!

Mas que diferencias creo que son rutas y formas de trabajo. Cuál es la más comoda para ti? A mi me gusto mucho CSS Grid pero creo que esta clase es básica para los que no saben que es una grilla y luego puedan disfrutar de los beneficios de CSSGrid.

: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);
}

.col {
    width: auto;
}
.col-1 {
    width: 8.3333333333%;
}
.col-2 {
    width: 16.6666666666%;
}
.col-3 {
    width: 24.9999999999%;
}
.col-4 {
    width: 33.3333333332%;
}
.col-5 {
    width: 41.6666666665%;
}
.col-6 {
    width: 49.9999999998%;
}
.col-7 {
    width: 58.3333333331%;
}
.col-8 {
    width: 66.6666666664%;
}
.col-9 {
    width: 74.9999999997%;
}
.col-10 {
    width: 83.333333333%;
}
.col-11 {
    width: 91.6666666663%;
}
.col-12 {
    width: 100%;
}```

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