Contenedor que enmarca el sitio web. Es necesario para responsive.
<div class="container">CONTAINER</div>
Contenedor que obliga a un mínimo de 500px de alto.
<div class="container_feature">Container feature 500px mínimo de alto. </div>
Contenedor que obliga a un mínimo de 300px de alto.
<div class="container_feature_half">Container feature 300px mínimo de alto. </div>
Contenedor que obliga a un mínimo de 70px de alto.
<div class="container_feature_quarter">Container feature 70px mínimo de alto. </div>
Contenedor con ancho regulado. Por porcentaje.
Nota la classe Marged centra el div por medio de margin
Para estas clases tenemos:
.container_width_100
: Contenedor al 100%
.container_width_90
: Contenedor al 90%
.container_width_80
: Contenedor al 80%
.container_width_70
: Contenedor al 70%
.container_width_60
: Contenedor al 60%
.container_width_50
: Contenedor al 50%
<div class="container_width_100">Contenedor al 100% de ancho </div>
<div class="container_width_90" marged>Contenedor al 90% de ancho </div>
<div class="container_width_80 marged">Contenedor al 80% de ancho </div>
<div class="container_width_70 marged">Contenedor al 70% de ancho </div>
<div class="container_width_60 marged">Contenedor al 60% de ancho </div>
<div class="container_width_50 marged">Contenedor al 50% de ancho </div>
Espacio para agregar
seccion-spacer
x x x x x x x x x x x x x
<div class="seccion-spacer"></div>
x x x x x x x x x x x x x
seccion-spacer-half
x x x x x x x x x x x x x
<div class="seccion-spacer-half"></div>
x x x x x x x x x x x x x
seccion-spacer-quarter
x x x x x x x x x x x x x
<div class="seccion-spacer-quarter"></div>
x x x x x x x x x x x x x
Para poder aplicar un contenedor de grid, es necesario la clase grid-container
y cada columna debe de ser declarada también. grid-columna
Dos columnas
<div class="grid-container grid-columna-2">
<div class="grid-columna">
Oat cake powder cotton candy icing bear claw chupa
chups marshmallow liquorice dessert. Chocolate bar
oat cake apple pie toffee. Sesame snaps fruitcake
pie biscuit lollipop pastry macaroon halvah halvah.
Croissant powder gummi bears ice cream icing cake
jujubes oat cake sesame snaps.
</div>
<div class="grid-columna">
Oat cake powder cotton candy icing bear claw chupa
chups marshmallow liquorice dessert. Chocolate bar
oat cake apple pie toffee. Sesame snaps fruitcake
pie biscuit lollipop pastry macaroon halvah halvah.
Croissant powder gummi bears ice cream icing cake
jujubes oat cake sesame snaps.
</div>
</div>
Dos columnas Sided
Significa que la primera es leve mente más ancha que la segunda.
<div class="grid-container grid-columna-2-sided">
<div class="grid-columna">
Oat cake powder cotton candy icing bear claw chupa
chups marshmallow liquorice dessert. Chocolate bar
oat cake apple pie toffee. Sesame snaps fruitcake
pie biscuit lollipop pastry macaroon halvah halvah.
Croissant powder gummi bears ice cream icing cake
jujubes oat cake sesame snaps.
</div>
<div class="grid-columna">
Oat cake powder cotton candy icing bear claw chupa
chups marshmallow liquorice dessert. Chocolate bar
oat cake apple pie toffee. Sesame snaps fruitcake
pie biscuit lollipop pastry macaroon halvah halvah.
Croissant powder gummi bears ice cream icing cake
jujubes oat cake sesame snaps.
</div>
</div>
Tres columnas
<div class="grid-container grid-columna-3">
<div class="grid-columna ">
x x x x x x x x x x x x x x x x x x x x x x x x x
</div>
<div class="grid-columna">
x x x x x x x x x x x x x x x x x x x x x x x x x
</div>
<div class="grid-columna">
x x x x x x x x x x x x x x x x x x x x x x x x x
</div>
</div>
Cuatro columnas
<div class="grid-container">
<div class="grid-columna grid-columna-4">
a a a a a a a a a a a a a a a a a a a a a a a a a
</div>
<div class="grid-columna grid-columna-4">
b b b b b b b b b b b b b b b b b b b b b b b b b
</div>
<div class="grid-columna grid-columna-4">
c c c c c c c c c c c c c c c c c c c c c c c c c
</div>
<div class="grid-columna grid-columna-4">
d d d d d d d d d d d d d d d d d d d d d d d d d
</div>
</div>
Genera un espacio de padding a los elementos. De 3%
<div class="padding">Padding </div>