CSS Grid
What is this Magic?!

CSS Grid
What is this Magic?!

CSS Grid
What is this Magic?!

World Wide Web

The WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents.

Everything there is online about W3 is linked directly or indirectly to this document, including an executive summary of the project, Mailing lists Policy , November's W3 news ,Frequently Asked Questions .

What's out there?
Pointers to the world's online information, subjects, W3 servers, etc.
Help
on the browser you are using
Software Products
A list of W3 project components and their current state. (e.g. Line Mode ,X11 Viola , NeXTStep Servers , Tools , Mail robot , Library )
Technical
Details of protocols, formats, program internals etc
Bibliography
Paper documentation on W3 and references.
People
A list of some people involved in the project.
History
A summary of the history of the project.
How can I help ?
If you would like to support the web..
Getting code
Getting the code by anonymous FTP , etc.

						

My Website

Home
Menu link
Menu link

Page heading

Lorum Ipsum pair.
Lorum ipsum
 
Copyright ©

My Website

Home
Menu link
Menu link

Page heading

Lorum Ipsum pair.
Lorum ipsum
 
Copyright ©

						

							

My Website

Page heading

Lorum Ipsum pair.
Lorum ipsum
Copyright ©

My Website

Page heading

Lorum Ipsum pair.
Lorum ipsum
						
							header {
								height: 100px;
								padding: 10px;
							}
							nav {
								clear: both;
								height: 25px;
								padding: 15px;
							}
							main {
								clear: both;
								overflow: hidden;
							}
							aside {
								float: left;
								padding: 10px;
							}
							article {
								float: left;
								padding: 10px;
								width: 55%;
							}
							footer {
								clear: both;
								height: 20px;
							}
						
					

My Website

Page heading

Lorum Ipsum pair.
Lorum ipsum
						
							.parent {
								clear: both;
								overflow: hidden;
							}
							
							.child {
								float: left;
								width: 100%;
								
								@media (min-width: 500px) {
									margin-right: 2%;
									width: 49%;
							
									&:nth-child(2n) {
										margin-right: 0;
									}
							
									&:nth-child(2n + 1) {
										clear: both;
									}
								}
						
					
						
								@media (min-width: 800px) {
									clear: none !important;
									margin-right: 1% !important;
									width: 32.6666667%;
							
									&:nth-child(3n) {
										margin-right: 0 !important;
									}
							
									&:nth-child(3n + 1) {
										clear: both !important;
									}
								}
							}
						
						
						
							

My Website

Page heading

Lorum ipsum pair.
Lorum ipsum
Copyright ©

My Website

Page heading

Lorum ipsum pair.
Lorum ipsum
						
							header {
								height: 100px;
							}
							nav {
								display: flex;
									align-items: center;
								height: 30px;
								padding: 10px;
							}
							main {
								display: flex;
							}
							aside {
								width: 20%;
								nav {
									flex-wrap: wrap;
								}
							}
							article {
								padding: 10px;
								width: 55%;
							}
							footer {
								height: 20px;
								padding: 10px;
								text-align: center;
							}
						
					

My Website

Page heading

Lorum ipsum pair.
Lorum ipsum

						.parent {
							display: flex;
							width: 102%;
							margin: -1%;
						}
					

							.child {
								flex: 1 1 auto;
								margin: 1%;
							}
						

						

My Website

Page heading

Lorum ipsum pair.
Lorum ipsum
Copyright ©

My Website

Page heading

Lorum ipsum pair.
Lorum ipsum

						body {
							display: grid;
							grid-template-columns: repeat(5, 1fr);
						}
						
						header {
							grid-column: 1 / -1;
						}
						
						nav {
							grid-column: 1 / -1;
						}
						
						main {
							grid-column: span 3;
						}
						
						footer {
							grid-column: 1 / -1;
						}
					

My Website

Page heading

Lorum ipsum pair.
Lorum ipsum

						

My Website

Home
Menu link
Menu link

Page heading

Lorum Ipsum pair.
Lorum ipsum
 
Copyright ©

							body {
								display: grid;
								grid-template-columns: repeat(5, 1fr);
							}
							
							header {
								grid-column: 1 / -1;
							}
							
							nav {
								grid-column: 1 / -1;
							}
							
							main {
								grid-column: span 3;
							}
							
							footer {
								grid-column: 1 / -1;
							}
					

Grid ≠ Tables
PS. Tables aren't bad, they're misunderstood

Grid helps us
write semantic HTML


						

My Notebook

Note 1

There is a note written here...


						body {
							display: grid;
						}
					

						body {
							display: grid;
						}
					

						body {
							display: grid;
							grid-template-columns: 200px 200px 200px 200px 200px;
						}
					

						body {
							display: grid;
							grid-template-columns: repeat(5, 200px);
						}
					

						repeat(number of times, size)
					

						repeat(3, 200px)
					

200px 200px 200px


						repeat(2, 10px 20vw)
					

10px 20vw 10px 20vw


						body {
							display: grid;
							grid-template-columns: repeat(5, 20%);
						}
					

						body {
							display: grid;
							grid-template-columns: repeat(5, 1fr);
						}
					

The fr unit


						grid-template-columns: 100px 1fr 50px 2fr;
						grid-gap: 20px;
					
100% element width 510px - existing content - 150px - gap - 60px ÷ number of frs ÷ 3

1fr = 100px


						/*grid-template-columns: 100px 1fr 50px 2fr;*/
						grid-template-columns: 100px 100px 50px 200px;
						grid-gap: 20px;
					

						body {
							display: grid;
							grid-template-columns: repeat(5, 1fr);
						}
					

						body {
							grid-template-columns: repeat(5, 1fr);
						}
					

						body {
							display: grid;
							grid-template-columns: repeat(5, 1fr);
							grid-template-rows: 100px 1fr 20px;
						}
					

						body {
							grid-template-columns: repeat(5, 1fr);
							grid-template-rows: 100px 1fr 20px;
						}
					

						header {
							grid-column-start: 1;
						}
					

						header {
							grid-column-start: 1;
							grid-column-end: -1;
						}
					

						header {
							/*grid-column-start: 1;
							grid-column-end: -1;*/
							grid-column: 1 / -1
						}
					

						header {
							/*grid-column-start: 1;
							grid-column-end: -1;
							grid-column: 1 / -1*/
							grid-column: span 5;
						}
					

						header {
							grid-column: 1 / -1
						}
					

						header {
							grid-column: 1 / -1;
						}
					

						nav {
							grid-row: span 2;
						}
					

						nav {
							grid-row: span 2;
						}
					

						main {
							grid-column: span 4;
						}
					

						main {
							grid-column: span 4;
						}
					

						footer {
							grid-column: span 4;
						}
					

						footer {
							grid-column: span 4;
						}
					

						body {
							grid-template-columns: repeat(5, 1fr);
							grid-template-rows: 100px 1fr 20px;
							grid-template-areas:
							  'header header header header header'
							  'nav    note   note   note   note'
							  'nav    footer footer footer footer';
						}
					

						header {
							grid-area: header;
						}

						nav {
							grid-area: nav;
						}
					

						main {
							grid-area: note;
						}

						footer {
							grid-area: footer;
						}
					
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

Basic layout ☑️
7 lines of CSS 🤯


						main {
							display: contents;
						}
					

						

Note Title

Note Content


						
							

Note Title

Note Content


						main {
							grid-area: note;
							display: contents;
						}
					

						main {
							grid-area: note;
							display: contents;
						}
					

						body {
							grid-template-areas:
							  'header header header header header'
							  'nav    note   note   note   sidebar'
							  'nav    footer footer footer footer';
						}
					

						article {
							grid-area: note;
						}
					

						aside {
							grid-area: sidebar;
						}
					

display: contents
makes screen readers cry


						
							

Note Title

Note Content


						
					
http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html

Don't mess with the DOM

Subgrid to the rescue!


						body {
							grid-template-areas:
								'header header header header header'
								'nav    note   note   note   note'
								'nav    footer footer footer footer';
						}
					

						main {
							grid-area: note;
							/*display: contents;*/
							display: grid;
						}
					

						main {
							grid-area: note;
							display: grid;
						}
					

						main {
							display: grid;
							grid-template-columns: subgrid;
						}
					

						main {
							grid-template-columns: subgrid;
						}
					

							article {
								grid-column: span 3;
							}
						

								article {
									grid-column: span 3;
								}
						
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_layout/Subgrid
https://rachelandrew.co.uk/archives/2019/04/16/css-subgrid-news-and-demos

So does Grid replace Flexbox?

https://www.dccomics.com/characters/batgirl

Grid is awesome for layouts

Flexbox is awesome
for flowing content

Grid + Flex =
super CSS Layout duo


						footer nav {
							display: flex;
							justify-content: space-between;
						}
					

						footer nav {
							display: flex;
							justify-content: space-between;
						}
					

						grid-parent {
							justify-items: stretch;
							align-items: stretch;
						}
					

						grid-child {
							justify-self: stretch;
							align-self: stretch;
						}
					

						footer {
							justify-self: start;
						}
					

						footer {
							justify-self: start;
						}
					

						footer {
							justify-self: start;
							width: 300px;
						}
					

						footer {
							justify-self: start;
							width: 300px;
						}
					

						main {
						  grid-template-columns: repeat(10, 300px);
						}
					

						main {
						  grid-template-columns: repeat(auto-fill, 300px);
						}
					

						repeat(auto-fill, 100px)
					

						auto-fill / auto-fit
					
https://codepen.io/SaraSoueidan/pen/JrLdBQ

						repeat(auto-fill, 100px)
					

						main {
							grid-template-columns: repeat(auto-fill, 300px);
						}
					

						main {
							grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
						}
					

						minmax(100px, 20vw)
					

						minmax(100px, 1fr)
					

						minmax(1fr, 300px)
					

						main {
							grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
						}
					

						main {
							grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
						}
					

						main {
							grid-template-rows: repeat(auto-fill, 150px);
						}
					

						main {
							grid-template-rows: repeat(auto-fill, 150px);
						}
					

						main {
							grid-column-gap: 20px;
						}
					

						main {
							grid-column-gap: 20px;
							grid-row-gap: 20px;
						}
					

						main {
							/*grid-column-gap: 20px;
							grid-row-gap: 20px;*/
							grid-gap: 20px;
						}
					

						.parent {
							margin: -10px;
						}

						.child {
							margin: 10px;
						}
					

						.child {
							margin: 10px;
						}
						.child:nth-child(5n) {
							margin-right: 0;
						}
						.child:nth-child(5n+1) {
							margin-left: 0;
						}
						.child:nth-child(-n+6) {
							margin-top: 0;
						}
					

						main {
							grid-gap: 20px;
						}
					

Sound too good to be true?

Browser Support 😬

57 52 10.1 16 10ish

91.06%

🤣
21 28 6.1 12 10

97.6%


						@supports
					

						@supports(css-property: value) {
							/*Insert code here*/
						}
					

						@supports(display: grid) {
							/*Code here*/
						}
					

						@supports(grid-template-areas: '.') {
							/*Code here*/
						}
					

						@supports(grid-template-areas: '.') {
							main {
								display: grid;
							}
						}
					

Wow!
That's Awesome!

🥁

CSS Grid 2.0 🥳

But...

But there's not enough support

But there's not enough support

91.06%

But there's not enough support

@supports

But we have to write a fallback

You've already got one 🤷‍♀

But we don't have time

But we don't have time

You don't have to use
grid everywhere

But we'll have to maintain it

But we'll have to maintain it

It's CSS.
No frameworks. Just CSS

Summing up:
CSS Grid is Awesome
The End

https://css-tricks.com/snippets/css/complete-guide-grid
https://cssgrid.io
https://abookapart.com/products/the-new-css-layout
https://rachelandrew.co.uk
http://jensimmons.com
https://cssgridgarden.com
https://flexboxfroggy.com

Thank You 👏