CSS Grids or: How I Learned to Stop Worrying and Love the new spec By Ariel Wiznia

Hello! - I'm a frontend developer currently working at R/GA, Buenos Aires - I've been working on the web since the marvelous Flash years - I survived the table layout... - Embraced the new div way to build websites... - and now I'm ready for the future!

So...what's the future? GRIDS!

Grids are a new way of organizing a layout via CSS on a page It allows us to define a structure in which you can control what goes into each row or column and in what order.

Standard grid

Grid lines

Grid lines (highlighted)

Grid track

Grid cell

Grid area

Defining a grid HTML:       Header
      Content
      Aside
      Footer
 


CSS: .container {      display: grid;  }

Setting grid layout CSS: .container {      display: grid;      grid­template­rows: 200px 35px 420px 35px 200px;      grid­template­columns: 740px 35px 185px;      margin: auto;      max­width: 960px;  }  .container div {      border: 2px solid #c7c7c7;      background­color: #fff;      display: flex;      align­items: center;      justify­content: center;      font: bold 30px/1 'Montserrat', Helvetica, sans­serif;  }

Defining where each content will be placed CSS: .header {      grid­column­start: 1;      grid­column­end: 4;      grid­row­start: 1;      grid­row­end: 2;  }  .main {      grid­column­start: 1;      grid­column­end: 2;      grid­row­start: 3;      grid­row­end: 4;  }  .aside {      grid­column­start: 3;      grid­column­end: 4;      grid­row­start: 3;      grid­row­end: 4;  }  .footer { 

View on CodePen

Grid column / grid row simplified: .header {      grid­column: 1 / 4;      grid­row: 1 / 2;  }  .main {      grid­column: 1 / 2;      grid­row: 3 / 4;  }  .aside {      grid­column: 3 / 4;      grid­row: 3 / 4;  }  .footer {      grid­column: 1 / 4;      grid­row: 5 / 6;  }

View on CodePen

Grid column / grid row even more simplified: .header {      grid­area: 1 / 1 / 2 / 4;  }  .main {      grid­area: 3 / 1 / 4 / 2;  }  .aside {      grid­area: 3 / 3 / 4 / 4;  }  .footer {      grid­area: 5 / 1 / 6 / 4;  }

View on CodePen

Grid layout without gaps: .container {      display: grid;      grid­template­rows: 200px 35px 420px 35px 200px;      grid­template­columns: 740px 35px 185px;      margin: auto;      max­width: 960px;  }

Setting grid layout (with gaps!) CSS: .container {      display: grid;      grid­template­rows: 200px 420px 200px;      grid­template­columns: 740px 185px;      grid­gap: 35px;      margin: auto;      max­width: 960px;  }

CSS: .header {      grid­column: 1 / 3;      grid­row: 1 / 2;  }  .main {      grid­column: 1 / 2;      grid­row: 2 / 3;  }  .aside {      grid­column: 2 / 3;      grid­row: 2 / 3;  }  .footer {      grid­column: 1 / 3;      grid­row: 3 / 4;  }

View on CodePen

Adding the "span" keyword: .header {      grid­column: 1 / span 2;      grid­row: 1;  }  .main {      grid­column: 1;      grid­row: 2;  }  .aside {      grid­column: 2;      grid­row: 2;  }  .footer {      grid­column: 1 / span 2;      grid­row: 3;  }

View on CodePen

Adding name based grid lines: .container {      display: grid;      grid­template­rows: [row­1­start] 200px [row­2­start] 420px  [row­3­start] 200px [row­     grid­template­columns: [col­1­start] 740px [col­2­start] 185px [col­2­end];      grid­gap: 35px;      margin: auto;      max­width: 960px;  }

Adding name based grid lines (extended): .header {      grid­column: col­1­start / col­2­end;      grid­row: row­1­start;  }  .main {      grid­column: col­1­start;      grid­row: row­2­start;  }  .aside {      grid­column: col­2­start;      grid­row: row­2­start;  }  .footer {      grid­column: col­1­start / col­2­end;      grid­row: row­2­end;  }

View on CodePen

Defining the same name for every row/col: .container {      display: grid;      grid­template­rows: [row] 200px [row] 420px  [row] 200px [row];      grid­template­columns: [col] 740px [col] 185px [col];      grid­gap: 35px;      margin: auto;      max­width: 960px;  }

Specifying each row/col: .header {      grid­column: col 1 / 3;      grid­row: row;  }  .main {      grid­column: col 1;      grid­row: row 2;  }  .aside {      grid­column: col 2;      grid­row: row 2;  }  .footer {      grid­column: col 1 / 3;      grid­row: row 3;  }

View on CodePen

Explicit vs Implicit grid

Nested Grids HTML:       Header
              Subcontent 1
        Subcontent 2
        Subcontent 3
           Aside      Footer 

CSS: .main {      grid­column: col 1;      grid­row: row 2;      display: grid;      padding: 10px;      grid­gap: 10px;      grid­template­columns: 50% 50%;  }  .subcontent­1 {      grid­column: 1 / 3;      grid­row: 1;  }  .subcontent­2 {      grid­column: 1;      grid­row: 2;  }  .subcontent­3 {      grid­column: 2;      grid­row: 2; 

View on CodePen

Grid auto rows/columns .container {      display: grid;      grid­template­rows: [row] 200px [row] 420px [row] 200px [row];      grid­template­columns:   [col] 740px [col] 185px;      grid­gap: 35px;      grid­auto­rows: 500px;      grid­auto­columns: 200px;       margin: auto;      max­width: 960px;  }

View on CodePen

Grid areas CSS: .container {      display: grid;      grid­template­rows: 200px 420px 200px;      grid­template­columns: 740px 185px;      grid­template­areas:           "header header"          "content aside"          "footer footer";      grid­gap: 35px;      margin: auto;      max­width: 960px;  }  .header {      grid­area: header;  }  .main {      grid­area: content;  }  .aside { 

View on CodePen

Defining grid placement based on grid area name HTML:     Header    Content    Aside    Footer    Overlay 

CSS: .container .overlay {      background­color: #ff0000;      grid­column: content­start / content­end;      grid­row: header­start / content­end;  }

View on CodePen

Align items / Justify items There are 4 possible values for this properties: start end stretch center .container {      display: grid;      grid­template­rows: 200px 420px 200px;      grid­template­columns: 740px 185px;      grid­template­areas:           "header header"          "content aside"          "footer footer";      grid­gap: 35px;      margin: auto;      max­width: 960px;      align­items: center;  }

View on CodePen

.container {      display: grid;      grid­template­rows: 200px 420px 200px;      grid­template­columns: 740px 185px;      grid­template­areas:           "header header"          "content aside"          "footer footer";      grid­gap: 35px;      margin: auto;      max­width: 960px;      align­items: start;  }

View on CodePen

.container {      display: grid;      grid­template­rows: 200px 420px 200px;      grid­template­columns: 740px 185px;      grid­template­areas:           "header header"          "content aside"          "footer footer";      grid­gap: 35px;      margin: auto;      max­width: 960px;      align­items: end;  }

View on CodePen

.container {      display: grid;      grid­template­rows: 200px 420px 200px;      grid­template­columns: 740px 185px;      grid­template­areas:           "header header"          "content aside"          "footer footer";      grid­gap: 35px;      margin: auto;      max­width: 960px;      align­items: stretch;  }

View on CodePen

Align items / Justify items .container {      display: grid;      grid­template­rows: 200px 420px 200px;      grid­template­columns: 740px 185px;      grid­template­areas:           "header header"          "content aside"          "footer footer";      grid­gap: 35px;      margin: auto;      max­width: 960px;      justify­items: center;  }

View on CodePen

Align items / Justify items .container {      display: grid;      grid­template­rows: 200px 420px 200px;      grid­template­columns: 740px 185px;      grid­template­areas:           "header header"          "content aside"          "footer footer";      grid­gap: 35px;      margin: auto;      max­width: 960px;      justify­items: start;  }

View on CodePen

Align items / Justify items .container {      display: grid;      grid­template­rows: 200px 420px 200px;      grid­template­columns: 740px 185px;      grid­template­areas:           "header header"          "content aside"          "footer footer";      grid­gap: 35px;      margin: auto;      max­width: 960px;      justify­items: end;  }

View on CodePen

Align items / Justify items .container {      display: grid;      grid­template­rows: 200px 420px 200px;      grid­template­columns: 740px 185px;      grid­template­areas:           "header header"          "content aside"          "footer footer";      grid­gap: 35px;      margin: auto;      max­width: 960px;      justify­items: stretch;  }

View on CodePen

So..what about the real world?

Grid support: not much...for now!

Enabling grid support on the browser: Firefox

Enabling grid support on the browser: Chrome

Files on https://github.com/wiznia/grids Download talk on PDF at: https://raw.githubusercontent.com/wizni a/grids/master/css-grids.pdf Codepen examples from this talk at: http://codepen.io/wiznia/ My Twitter: @wiznia

Thank you!

How I Learned to Stop Worrying and Love the new spec - GitHub

Embraced the new div way to build websites... - and now I'm ready for the future! ..... https://raw.githubusercontent.com/wizni · a/grids/master/css-grids.pdf.
Download PDF
4MB Sizes 0 Downloads 125 Views
Report

Recommend Documents

Dr. Strangelove or How I Learned to Stop Worrying and Love the ...
Dr. Strangelove or How I Learned to Stop Worrying and Love the Bomb Streaming en Francais 1964_.MP4.pdf. Dr. Strangelove or How I Learned to Stop ...
Se Dr. Strangelove or How I Learned to Stop Worrying and Love the ...
Se Dr. Strangelove or How I Learned to Stop Worrying and Love the Bomb Danske Undertekster 1964_.MP4.pdf. Se Dr. Strangelove or How I Learned to Stop ...
Dr. Strangelove or How I Learned to Stop Worrying and Love the ...
Retrying... Download. Connect more apps... Try one of the apps below to open or edit this item. Dr. Strangelove or How I Learned to Stop Worrying and Love the Bomb Danish Sub Full Movie 1964_.MP4.pdf. Dr. Strangelove or How I Learned to Stop Worrying
Watch Dr. Strangelove or How I Learned to Stop Worrying and Love ...
Watch Dr. Strangelove or How I Learned to Stop Worrying and Love the Bomb (1964) Full Movie Online.pdf. Watch Dr. Strangelove or How I Learned to Stop ...
Dr. Strangelove or How I Learned to Stop Worrying ...
MP4.pdf. Dr. Strangelove or How I Learned to Stop Worrying and Love the Bomb Film Stream German 1964_.MP4.pdf. Open. Extract. Open with. Sign In.
Dr. Strangelove or How I Learned to Stop Worrying ...
MP4.pdf. Dr. Strangelove or How I Learned to Stop Worrying and Love the Bomb 1964 Full Movie Dansk Tale _.MP4.pdf. Open. Extract. Open with. Sign In.
How to Learn to Stop Worrying and Love the Job Market
The contributions of this paper are to provide detailed advice, focus on candidates from non-top- tier schools, and ... candidates from lower-ranked schools must be aware of special challenges they face. It is very ...... 8 When I was on the job mark
How To Stop Worrying And Start Living
9 - Co-operate with the Inevitable. 10 - Put a ..... planning; bad thinking frequently leads to tension and nervous breakdowns. ...... Financial disaster and grief. 3.
PDF How to Stop Worrying and Start Living Full Books
How to Stop Worrying and Start Living Download at => https://pdfkulonline13e1.blogspot.com/0671733354 How to Stop Worrying and Start Living pdf download, How to Stop Worrying and Start Living audiobook download, How to Stop Worrying and Start Liv
How To Stop Worrying And Start Living
5 - How to Eliminate Fifty Per Cent of Your Business Worries .... Salesmen wanted to be able to call on a tough customer without having to walk around the block.
Declutter Your Mind: How to Stop Worrying, Relieve ...
introduce the simple 11-step process to use for building the mediation habit. ... This section has enough juice in it to make your living space a business ... agree it is a very sensible approach to reduce the number of impulses that stimulate your.
eBook Declutter Your Mind: How to Stop Worrying ...
your mobile number or email address below and we ll send you a link to download the free Kindle App Then you can start reading Kindle books on your smartphone 15 Pregnancy Apps That Answer All Your ... can supplement info your doc s given you keep yo
eBook Declutter Your Mind: How to Stop Worrying ...
Aug 23, 2016 - ... their best pregnancy apps can supplement info your doc s given you keep you updated on ... Or do you want to ... create more "space" in your.
THE CINEMA OF ONUR ÜNLÜ OR 'HOW I LEARNED TO STOP ...
Also since the Nuri Bilge Ceylan becomes the ... THE CINEMA OF ONUR ÜNLÜ OR 'HOW I LEARNED TO STOP WORRYING AND LOVE' THE VIOLENCE .pdf.
THE CINEMA OF ONUR ÜNLÜ OR 'HOW I LEARNED TO STOP ...
THE CINEMA OF ONUR ÜNLÜ OR 'HOW I LEARNED TO STOP WORRYING AND LOVE' THE VIOLENCE .pdf. THE CINEMA OF ONUR ÜNLÜ OR 'HOW I ...