/* ==========================================================================
06_LAYOUT: GRID AND COLUMNS
--------------------------------------------------------------------------
* README
* GRID: BASICS
* GRID: WIDTHS
* GRID: GUTTERS
* GRID: VERTICAL ALIGNMENT
* GRID: HORIZONTAL ALIGNMENT
* COLUMNS: BASICS
* COLUMNS: WIDTHS
* COLUMNS: GUTTERS
========================================================================== */
/* README
========================================================================== */
/*!
* Grid styles on this stylesheet are a very minimal and free adaptation of
* https://philipwalton.github.io/solved-by-flexbox/demos/grids/
* If you are new to flex, this article is very clear and useful:
* https://css-tricks.com/snippets/css/a-guide-to-flexbox/
* Styles on this stylesheet are the Grid and Columns default styles.
* That means they apply to the specific Grid and Columns HTML, and therefore,
* they apply only to the pages that display this HTML.
* At the moment we have not had to deal with any exception to these Grid and
* Columns default styles, but if it becomes necessary, let's talk about it and
* find a way to incorporate the given exception to this Grid and Columns default
* styles, as they should be able to cover any possible use without exceptions.
*/
/* GRID: BASICS
========================================================================== */
/* HTML Snippet
--------------------------------------------------------------------------
To be used as a wrapper to manage any set of elements that need to be
arranged either in columns (with or without declared width) or as a grid.
--------------------------------------------------------------------------
-------------------------------------------------------------------------- */
/* Behaviour
-------------------------------------------------------------------------- */
.grid {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.grid__item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
/* GRID: WIDTHS
========================================================================== */
/* Structure
-------------------------------------------------------------------------- */
/*
* On mobile, by default all .grid__item elements are full width.
*/
.grid > .grid__item {
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
min-width: 0;
flex-direction: column;
}
.grid__item > * {
width: 100%;
}
@media (min-width:769px) {
/*
* On desktop, by default all .grid__item distribute to fit one row.
*/
.grid > .grid__item {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
/*
* By adding a .grid--X modifier class to the .grid element, you can set
* all children .grid__item width to the specified value or percentage, and
* they will collapse to a new row if necessary.
*/
.grid--1 > .grid__item {
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.grid--2 > .grid__item {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.grid--3 > .grid__item {
-webkit-box-flex: 0;
-webkit-flex: 0 0 33.3333%;
-ms-flex: 0 0 33.3333%;
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
.grid--4 > .grid__item {
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.grid--5 > .grid__item {
-webkit-box-flex: 0;
-webkit-flex: 0 0 20%;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
.grid--6 > .grid__item {
-webkit-box-flex: 0;
-webkit-flex: 0 0 16.6666%;
-ms-flex: 0 0 16.6666%;
flex: 0 0 16.6666%;
max-width: 16.6666%;
}
/*
* By adding a .grid__item--X modifier class to a .grid__item element, you can set
* a width for that specific element only, while the remaining ones continue to be
* in auto.
*/
.grid > .grid__item--aside {
-webkit-box-flex: 0;
-webkit-flex: 0 0 320px;
-ms-flex: 0 0 320px;
flex: 0 0 320px;
max-width: 320px;
}
}
/* GRID: GUTTERS
========================================================================== */
/* Structure
-------------------------------------------------------------------------- */
/*
* By default the .grid element sets the grid gutters to 20px width.
*/
.grid {
margin: -20px 0 0 -20px;
}
.grid > .grid__item {
padding: 20px 0 0 20px;
}
/*
* By adding a .grid--gutters-X modifier class to the .grid element, the grid
* gutters con be increased to 30px, 40px and so on.
*/
.grid--gutters-0 {
margin: 0 0 0 0;
}
.grid--gutters-0 > .grid__item {
padding: 0 0 0 0;
}
.grid--gutters-lg {
margin: -30px 0 30px -30px;
}
.grid--gutters-lg > .grid__item {
padding: 30px 0 0 30px;
}
.grid--gutters-xl {
margin: -40px 0 40px -40px;
}
.grid--gutters-xl > .grid__item {
padding: 40px 0 0 40px;
}
/* GRID: VERTICAL ALIGNMENT
========================================================================== */
/* Behaviour
-------------------------------------------------------------------------- */
/*
* By default the .grid element makes all children .grid__item stretch to match
* the tallest one in the row.
*/
.grid {
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
/*
* By adding a .grid--valign-X modifier class to the .grid element, you can align
* all children .grid__item at once on top, bottom or centered in the row space.
*/
.grid--valign-top {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.grid--valign-bottom {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
}
.grid--valign-center {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
/*
* By adding a .grid__item--valign-X modifier class to a specific .grid__item
* element, you can override any alignment set by the parent .grid element and
* make it individually on top, bottom or centered in the row space.
*/
.grid__item--valign-top {
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
}
.grid__item--valign-bottom {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
}
.grid__item--valign-center {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.grid__item--valign-autosize {
-webkit-box-flex: 0;
-webkit-flex: none;
-ms-flex: none;
flex: none;
}
/* GRID: HORIZONTAL ALIGNMENT
========================================================================== */
/* Behaviour
-------------------------------------------------------------------------- */
.grid--halign-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
/* COLUMNS: BASICS
========================================================================== */
/* HTML Snippet
--------------------------------------------------------------------------
To arrange in columns an unknown number of elements and ensure the layout
will adjust fluidly no matter its number.
--------------------------------------------------------------------------
{% for X %}
...
{% endfor %}