Editing Responsive design (section)

= Flexible grids: Grid =
CSS Grid Layout divides a page into major regions.

Like tables, grid layout enables an author to align elements into columns and rows. However grids is far more flexible than tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.

https://codepen.io/PublicationStation/pen/VwwzvbO

==Grid Basic==
The Grid, is a two-dimensional layout model to organize items, in rows and columns

To create a grid add the following to the the container:

* <code>display: grid;</code>
* <code>grid-template-columns: repeat(3, 1fr);</code>how many columns 
* <code>grid-template-rows: repeat(5, 1fr); </code> how many rows (optional)
* <code>grid-gap: 10px;</code> the space between grid cells

==Grid divisions==

* <code>grid-auto-rows: minmax(100px, auto);</code> defines the minimum height of the rows
* <code>grid-auto-columns: minmax(auto, 200px);</code>defines the maximum width of the columns

But to be more precise we can determine how we want the grip to be divided
* <code>grid-template-columns: repeat(3, 1fr);</code> divided into 3 columns with flex factor of 1
* <code>grid-template-rows:repeat(auto);</code> divided into as many rows as necessary

==Element positions in Grid==
Elements can be position in grid, using the division: where/how-many-division; Like for instance:
<source lang="css">
grid-column: 1 / 3;
grid-row: 1 / 4; 
</source>

<source lang="css">
.container div:nth-of-type(1){ background:#ddf4504f; 
                               grid-column: 1 / 3;
                               grid-row: 1 / 4;
                              }
</source>

==Grid align-items==
<code>align-items:</code> Controls where the flex items, with different sizes sit, vertically, in relation to one another. 
  
Possible values:
* stretch (default)
* center
* flex-end
* flex-start

==Reactive Grid==
'''What if we want to go from a multi-column grid, to a single column layout on small screens?'''

Rather than specifying the grid-template-columns with a fixed number of columns,
we can keep it as auto-fill and say we want each column to be a minimum of XYZ.px 

So that when the width of the columns in a 2, 3, 4 column layout become smaller than XYZ.px 
it will move 1 column to a row

<code>
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); 
</code>

'''See example: https://codepen.io/PublicationStation/pen/OJJjMyg'''

==Grid Links==
* https://gridbyexample.com/examples/


Flexible grids create a liquid layout, in which the page’s overall width resizes to fit different width screens.

In most cases implementing a flexible grid, can be created by setting the:

* '''parent container box (div)''':
** <code>width</code> to <code>100%</code>.
** <code>max-width</code> to a certain amount of pixels, so that the page isn’t absurdly wide on large desktop monitors.
* Individual columns
* <code>width</code>: percentage-based

----