03/08/2016, 13:26
|
 | Modegráfico | | Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 9 meses Puntos: 1826 | |
| Respuesta: Sistema de grillas
100% / 12
100% / 2
100% / 3
100% / 4
100% / 6
La cosa es más fácil de lo que parece.
Hace algunos años un sistema popular era el de 960 pixeles.
Igual. Era por que es fácilmente divisible en términos de pixeles.
960/12 = 80
y se veía bien en monitores de 1024x768 px.
Ya no aplica.
En CSS la división es así de simple como te pongo arriba. Una cosa que te recomiendo es que no uses márgenes. Usa padding.
La lógica es muy simple.
En un diseño normal en papel nunca tienes márgenes en realidad como están definidos en CSS. Tienes una hoja normalita y tienes márgenes interiores (padding). A partir de ahí sigue esa lógica. Cada bloque tiene un aire al rededor, pero ese aire es parte del mismo objeto.
Cuando divides tu 100% / 2 por ejemplo es muy claro. 50%.
Pero si usas márgenes tu mismo te complicas. Margen izquierdo 2% + Objeto 46% + Margen derecho 2% = 50%.
Puedes tener hasta 2 decimales en CSS. 33.33%
Aparte de eso está el sistema flexbox, que tendrás que estudiar, pero básicamente no es por porcentajes sino por "partes" como la receta de la abuelita.
Una columna de una parte. Otra columna de dos partes. = 3 partes.
El flex box asignará a la primer columna una de 3 partes; 1/3 y a la segunda 2/3. |