KDCinfo/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Code for: CSS Grid Layout - Rachel Andrew | February 2017

Frontend NE - Published on Feb 16, 2017

.cards {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(3,1fr);
	grid-auto-rows: 200px;
}
	.card:nth-child(1) {
		/* grid-column: 2 / 4; */
			/* grid-column-start: 2; */
			/* grid-column-end: 4; */
		/* grid-row: 1 / 3; */
			/* grid-row-start: 1; */
			/* grid-row-end: 3; */
		grid-area: 1 / 2 / 3 / 4;
			/* grid-row-start / grid-column-start / grid-row-end / grid-column-end
			/* reverse of `margin` & `padding` shorthands */
	}


.cards {
	display: grid;
	grid-gap: 20px;
	grid-template-columns:	[side-start] 1fr
					[main-start] 1fr 1fr
					[main-end];
	grid-template-rows:		[main-start] 200px 200px
					[main-end];
}
	.card:nth-child(1) {
		/* grid-column: main-start / main-end; */
		/* grid-row: main-start / main-end; */
		grid-area: main;
	}

(...alternative approach)
		grid-area: main;
	}
	.card:nth-child(2) {
		grid-area: side1;
	}
	.card:nth-child(3) {
		grid-area: side2;
	}


.cards {
	display: grid;
	grid-gap: 20px;
	grid-template-columns:	repeat(3, 1fr);
	grid-template-rows:		200px 200px;
	grid-template-areas:		"side1 main main"
					"side2 main main";
}


<div class="wrapper">
	<header class="mainheader"></header>
	<div class="panel"></div>
	<div class="content"></div>
</div>

.wrapper {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 2fr 4fr;
	grid-column-gap: 2em;
	grid-row-gap: 20px;
}
.mainheader {
	grid-column: 1 / 3;
	grid-row: 1;
}
.content {
	grid-column: 2;
	grid-row: 2;
}
.panel {
	grid-column: 1;
	grid-row: 2;
}

/*	overlaying the grid: https://youtu.be/N5Lt1SLqBmQ?t=1072
	https://codepen.io/rachelandrew/pen/KzJPGq */

<footer class="mainfooter"></footer>
.mainfooter {
	grid-column: 1 / 3;
	grid-row: 3;
}


RESPONSIVE - https://youtu.be/N5Lt1SLqBmQ?t=1166

.wrapper {
	display: grid;
	grid-row-gap: 10px;
}
	.mainheader {
		grid-row: 1;
	}
	.content {
		grid-row: 2;
	}
	.panel {
		grid-row: 3;
	}
	.mainfooter {
		grid-row: 4;
	}
@media (min-width: 550px) {
	.wrapper {
		grid-template-columns: 2fr 4fr;
		grid-column-gap: 2em;
		grid-row-gap: 20px;
	}
		.mainheader {
			grid-column: 1 / 3;
			grid-row: 1;
		}
		.content {
			grid-column: 1;
			grid-row: 2;
		}
		.panel {
			grid-column: 2;
			grid-row: 2;
		}
		.mainfooter {
			grid-column: 1 / 3;
			grid-row: 3;
		}
}


NAMED GRID LINES - https://youtu.be/N5Lt1SLqBmQ?t=1199

http://cssgrid.me/051622 --> https://codepen.io/rachelandrew/pen/YqBKdm
.wrapper {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;

	display: gird;
	grid-row-gap: 10px;
	grid-template-rows:
		[row-header-start] auto
		[row-content-start] auto
		[row-panel-start] auto
		[row-footer-start] auto [row-footer-end];
}
.mainheader {
	grid-row: row-header-start;
}
.content {
	grid-row: row-content-start;
}
.panel {
	grid-row: row-panel-start;
}
.mainfooter {
	grid-row: row-footer-start;
}


NAMED AREAS - https://youtu.be/N5Lt1SLqBmQ?t=1253

http://cssgrid.me/051623 --> https://codepen.io/rachelandrew/pen/WwPePp
/* Assign name to various page elements (outside of media queries) */

.mainheader {
	grid-area: header;
}
.content {
	grid-area: content;
}
.panel {
	grid-area: sidebar;
}
.mainfooter {
	grid-area: footer;
}

.wrapper {
	display: grid;
	grid-row-gap: 10px;
	grid-template-areas:
		"header"
		"content"
		"sidebar"
		"footer";
}
@media (min-width: 550px) {
	.wrapper {
		display: grid;
		grid-column-gap: 2em;
		grid-row-gap: 20px;
		grid-template-columns: 2fr 4fr;
		grid-template-areas:
			"header header"
			"sidebar content"
			" .   footer"; /* empty cell; full stop (period) */
	}
}


IMPLICIT NAMED GRID LINES - https://youtu.be/N5Lt1SLqBmQ?t=1401

.wrapper {
	display: grid;
	grid-column-gap: 2em;
	grid-row-gap: 20px;
	grid-template-columns: 2fr 4fr;
	grid-template-areas:
		"header header"
		"sidebar content"
		"footer footer";
}

.test {
	z-index: 100;
	background-color: red;
	grid-column: content-start;
	grid-row: content-start / footer-end;
}


Items on the Grid can be layered using the z-index property.
- https://youtu.be/N5Lt1SLqBmQ?t=1445


A 12-column, flexible grid - https://youtu.be/N5Lt1SLqBmQ?t=1463

http://cssgrid.me/051624 --> https://codepen.io/rachelandrew/pen/mPvboy
<div class="wrapper skeleton">
	<h1 class="header">CSS Grid Layout Version</h1>
	<div class="box1">Four columns</div>
	<div class="box2">Four columns</div>
	<div class="box3">Four columns</div>
	<div class="box4">Eight columns</div>
	<div class="box5">Four columns</div>
	<div class="box6">Three columns</div>
	<div class="box7">Three columns</div>
	<div class="box8">Three columns</div>
	<div class="box9">Three columns</div>
	<div class="box10">Six columns</div>
	<div class="box11">Six columns</div>
</div>

.wrapper {
	display: grid;
	grid-template-columns: repeat(2, [col] 1fr);
		/* multiple lines named "col" */
	grid-template-rows: repeat(5, [row] auto);
	grid-column-gap: 1em;
	grid-row-gap: 15px;
}
.box1 {
	grid-column: col / span 4; /* 1st col - spanning 4 lines */
	grid-row: row;
}
.box8 {
	grid-column: col 7 / span 3;
	grid-row: row 3;
}

.box1b {
	grid-column: col / span 4;
	grid-row: row / span 2;
}
.box2b {
	grid-column: col 5 / span 4;
	grid-row: row / span 3;
}


12-column grid - conventional conversion

http://cssgrid.me/051624 --> https://codepen.io/rachelandrew/pen/mPvboy
.mainheader {
	grid-column: col / span 12;
	grid-row: row;
}
.panel {
	grid-column: col / span 4;
	grid-row: row 2;
}
.content {
	grid-column: col 5 / span 8;
	grid-row: row 2;
}
.mainfooter {
	grid-column: col / span 12;
	grid-row: row 3;
}


(...alternative approach - footer under content)

.mainheader {
	grid-column: col / span 12;
	grid-row: row;
}
.panel {
	grid-column: col / span 4;
	grid-row: row 2 span 2;
}
.content {
	grid-column: col 5 / span 8;
	grid-row: row 2;
}
.mainfooter {
	grid-column: col 5 / span 8;
	grid-row: row 3;
}


Grid Item Placement Algorithm - https://youtu.be/N5Lt1SLqBmQ?t=1825

Grid Auto Flow

http://cssgrid.me/051626 --> https://codepen.io/rachelandrew/pen/pyGzBW
<ul class="wrapper">
	<li><h3>1.</h3> <img src="gallery1.jpg" alt="Balloons"></li>
	<li class="landscape"><h3>2.</h3> <img src="gallery2.jpg" alt="Balloons"></li>
	<li class="landscape"><h3>3.</h3> <img src="gallery8.jpg" alt="Balloons"></li>
	<li><h3>4.</h3> <img src="gallery4.jpg" alt="Balloons"></li>
	<li><h3>5.</h3> <img src="gallery5.jpg" alt="Balloons"></li>
	<li class="landscape"><h3>6.</h3> <img src="gallery6.jpg" alt="Balloons"></li>
	<li><h3>7.</h3> <img src="gallery9.jpg" alt="Balloons"></li>
</ul>

.wrapper {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-flow: dense; /* removes from DOM order */
}
.landscape {
	grid-column-end: span 2; /* ??? ??? ??? */
}


Grid and the Box Alignment Module - https://youtu.be/N5Lt1SLqBmQ?t=2060

Is Grid competing with Flex? [34:30 / 59:14 ]

No; Flex is a subset of Grid, which is its own internal framework.

Flexbox

.wrapper {
	display: flex;
}
.wrapper li {
	flex: 1 0 25%;
}
.wrapper li:nth-child(2) {
	align-self: center;
}
.wrapper li:nth-child(3) {
	align-self: flex-start;
}
.wrapper li:nth-child(4) {
	align-self: flex-end;
}

CSS Grid

.wrapper {
	display: grid;
}
.wrapper li {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.wrapper li:nth-child(2) {
	align-self: center;
}
.wrapper li:nth-child(3) {
	align-self: start;
}
.wrapper li:nth-child(4) {
	align-self: end;
}


When to use CSS Grid instead of Flexbox?


Flexbox	1 dimensional layout (row OR column)


CSS Grid	2 dimensional layout (rows AND columns)


Flexbox - 1 dimensional layout (row OR column)

.flex {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10px;
}
.flex li {
	flex: 1 1 200px;
	margin: 10px;
}

CSS Grid - 2 dimensional layout (rows AND columns)

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px 1fr));
	grid-gap: 20px;
}


envatotuts+	https://youtu.be/N5Lt1SLqBmQ?t=2333

.home-hero {
	display: grid;
	grid-gap: 1px;
	grid-auto-rows: minmax(150px, auto); /* Gives a height to rows */
}
/* Using flexbox inside the cells */
.special {
	display: flex;
	flex-direction: column;
}
.special h3 {
	margin-top: auto;
}


Grid and Accessibility - https://youtu.be/N5Lt1SLqBmQ?t=2452 [40:52]

Grid placement only affects the visual presentation!


Navigation proceeds from the lowest tabIndex to the highest tabIndex. (MDN)


Elements that have identical tabIndexes should be navigated in the order they appear. (MDN)


tabindex="0" allows non-tab elements to receive keyboard focus. It does not change the tab order, but places the element in the logical navigation flow. (MDN)


Positive values process "before" the "0"s. (Observation in  Chrome/Win)


"-1" acts as "0"; tabs skip <= "-2" (Observation in  Chrome/Win)


(Observations in Chrome/Win)