<img class="css" data-src="./lib/img/css.png"> <b style="font-size: 7rem;text-shadow: 0 5px 10px grey;">Grid Layout</b> The Future of CSS Has Come <img data-src="./lib/img/grid.jpg">

**CSS GRID MODULE was developed by the CSS Working Group in 2017** <img data-src="./lib/img/dev.png" style="position: absolute; top:-200px; left:43%;">

## <span style="color: green">ADVANTAGES</span> of GRID Module <img data-src="./lib/img/adv.png" style="position: absolute; top:-60px; right:-150px">

CSS Grid is optimized for <span style="color: #F38630">**two-dimensional templates**</span>

CSS Grid is one of the <span style="color: #F38630">***most powerful***</span> CSS modules ever presented.

<span style="color: #F38630">Easy</span> - it is more easily for developers and designers to work and collaborate with each other

## <span style="color: tomato">DISADVANTAGES</span> **of GRID Module** <img data-src="./lib/img/dis.png" style="position: absolute; top:-60px; right:-200px">

Limited Browsers

Bloated Markup (sometimes)

## <span style="color: #F38630">BASE Terminology</span> **of GRID Module** <img data-src="./lib/img/term.png" style="position: absolute; top:-50px; right:-220px; width: 24%">

#### <span style="color: #F38630">CONTAINER</span> This is the direct parent for all grid elements. <img data-src="./lib/img/container.png">

#### <span style="color: #F38630">ELEMENT</span> Child elements (direct descendants) of the container. <img data-src="./lib/img/item.png">

#### <span style="color: #F38630">Grid line</span> They can be vertical (“column lines”) or horizontal. <img data-src="./lib/img/grid-line.png">

#### <span style="color: #F38630">TRACK</span> The space between two adjacent lines. <img data-src="./lib/img/grid-track.png">

#### <span style="color: #F38630">GRID CELL</span> The space between the lines of two adjacent rows and two adjacent columns. <img data-src="./lib/img/grid-cell.png">

#### <span style="color: #F38630">GRID AREA</span> Common space surrounded by four lines <img data-src="./lib/img/grid-area.png">

### <span style="color: #F38630">display: grid;</span> <img data-src="./lib/img/display-grid.png">

grid-template-rows: 10% 1fr 2fr 12em; grid-template-columns: 10% 1fr 2fr 12em; <img data-src="./lib/img/template.png">

#### <span style="color: #F38630">repeat();</span> grid-template-columns: 1fr 1fr 1fr 1fr; === grid-template-columns: repeat(4, 1fr); <img data-src="./lib/img/repeat.png">

grid-row-start: 1; grid-row-end: 1; grid-column-start: 1; grid-column-end: 1; == grid-row: 1/2, grid-column: 1/4; <img data-src="./lib/img/grid-row.png">

<img data-src="./lib/img/columns-rows.jpeg">

#### <span style="color: #F38630">Naming Grid Lines</span> grid-template-row: [row1-start] 50px [row2-start] 1fr [row3-start] 80px [row3-end]; grid-template-columns: [col1-start] 120px [col2-start] 1fr [col3-start] 80px [col3-end]; <br/> <br/> <br/> .item{ grid-row: [row1-start] / [row3-start];<br/> grid-column: [col2-start] / [col3-end]; }

#### <span style="color: #F38630">GAP</span> grid-column-gap: 10px; <br/> grid-row-gap: 15px; <img data-src="./lib/img/gap-column.png">

grid-gap: 10px 15px; <img data-src="./lib/img/gap.png"> <img data-src="./lib/img/grid-gap.png">

#### <span style="color: #F38630">Explicit and Implicit Grids</span> <img data-src="./lib/img/implicit.jpeg" style="width:50%">

<span style="color: #F38630">**Explicit grid uses**</span> grid-template-rows и grid-template-columns <span style="color: #F38630">**Implicit grid uses**</span> grid-auto-flow, grid-auto-rows и grid-auto-columns <img data-src="./lib/img/explicit.jpeg" style="width:50%">

grid-auto-columns: 60px; grid-auto-rows: 90px; <img data-src="./lib/img/grid-auto-1.png"> <img data-src="./lib/img/grid-auto.png">

<img data-src="./lib/img/ruler.png" style="position: absolute; top:-30px; right:-170px; "> ### <span style="color: #F38630">CSS GRID Alignment </span>

justify-items: start | end | center | stretch; <img data-src="./lib/img/justify-items-1.png"> <img data-src="./lib/img/justify-items.png">

align-items: start | end | center | stretch; <img data-src="./lib/img/align-items-1.png"> <img data-src="./lib/img/align-items.png">

justify-content: start | end | center | stretch | space-around | space-between | space-evenly; <img data-src="./lib/img/justify-content-1.png"> <img data-src="./lib/img/justify-content.png">

align-content: start | end | center | stretch | space-around | space-between | space-evenly; <img data-src="./lib/img/align-content-1.png"> <img data-src="./lib/img/align-content.png">

justify-self: start | end | center | stretch; <img data-src="./lib/img/justify-self-1.png"> <img data-src="./lib/img/justify-self.png">

align-self: start | end | center | stretch; <img data-src="./lib/img/align-self-1.png"> <img data-src="./lib/img/align-self.png">

<img data-src="./lib/img/learn.png" style="position: absolute; top:-30px; left:-170px; width: 60%"> #### <span style="color: #F38630; margin-left: 350px;">Stay Come and Code </span> ##### <span style="color: #F38630;margin-left: 350px;">CSS GRID Layout </span> ##### <span style="color: #F38630;margin-left: 350px;">[RSSchool 2020](https://rs.school/)</span> ##### <span style="color: #F38630;margin-left: 350px;">[Holub Ivan](https://github.com/HolubIvan)</span> ##### <span style="color: #F38630;margin-left: 350px;">[YouTube Presentation](https://www.youtube.com/watch?v=dQyVipA5tuA&t=207s)</span>