Grid css

[00israel]

Buenos días. Quería haceros una pregunta.

Nunca he utilizado un GRID CSS para hacer una WEB. Y estoy un poco perdido. Quería que me aclararais algunas dudas.

Yo me creo un GRID en CSS definiendo columnas de varios tamaños. ¿principalmente columnas no? o filas también?

y ahora la pregunta del millón, como aplico esto a mi layout.css es decir si resulta que hay una caja que va a tener un ancho determinado que es exactamente el que yo le he dado en mi GRID a un cuadro de 3 columna (.tres-columnas) le sumo está clase?

no se si sería así.

Si pudierais aclarármelo os lo agradecería.

gracias

[pzin]

No sé si entiendo bien la duda que tienes.

Pero supongo que, básicamente, sí.

Si tienes definidas tus columnas, puedes hacer algo como:

Código HTML:

<div class="fila">
  <div class="columna que_ocupe_3_partes"></div>
  <div class="columna que_ocupe_9_partes"></div>
</div>
 

Código CSS:

.columna {
  float: left;
}
 
.columna.que_ocupe_3_partes {
  width: 25%; /* 3*(100/12) */
}
 
.columna.que_ocupe_3_partes {
  width: 75%; /* 9*(100/12) */
}
 

[00israel]

si, mas o menos es saber si he creado un grid en CSS, en una hoja aparte, luego le hago un @import y ya toda la maquetación de mi layout la voy haciendo utilizando la configuración que he creado en ese grid no? Es decir maqueto con el grid.css y el resto de estilos los defino en mi layout como colores, tipografías, mediaqueries (o los importo igualmente) pero vamos que en definitiva lo que va a regir mi maquetación pura y dura, va a ser lo que yo haya definido en el grid.css que voy a ir utilizando no?

[pzin]

Generalmente sí. Cuanto más organizado tengas todo, más fácil, cómodo y rápido será trabajar.

A mí personalmente me encanta trabajar con SASS por ese motivo. La ventaja en este sentido que hablamos, es que puedes sesgar todo tu código y al final compilar todo a un único archivo.

[00israel]

ok. entendido. Gracias pzin.

Estoy empezando a trastear con LESS y cuando lo tenga controlado me pasaré a SASS porque tenía un poco olvidada la maquetación web y ahora he vuelto a enganchar el hilo y estoy empapándome con los preprocesadores que nunca los he utilizado y por lo que veo less mantiene prácticamente la misma sintaxis que el CSS puro y duro. Eso me interesa para refrescar y no perder el habito de escribir CSS.

[00israel]

gracias de nuevo pin. Una duda he visto que has dado respuesta a otro usuario sobre un tema de flexbox y tengo una duda que aus vez tiene que ver también con el grid.

Es la siguiente. Que esta queriendo decir aquí el flex?:

Código:

.Grid--fit > .Grid-cell {
  flex: 1;
}
.Grid--full > .Grid-cell {
  flex: 0 0 100%;
}
.Grid--1of2 > .Grid-cell {
  flex: 0 0 50%
}
.Grid--1of3 > .Grid-cell {
  flex: 0 0 33.3333%
}
.Grid--1of4 > .Grid-cell {
  flex: 0 0 25%
}

entiendo los porcentajes que corresponderían al basis y los otros son el grow y el shrink pero porque la primera tiene 1 y los siguientes 0 0?