Code for: CSS Grid Changes EVERYTHING

README.md

Code for: CSS Grid Changes EVERYTHING

Coding Tech - Published on Jul 16, 2017

---

* Grid container display: grid;

• Grid item 1st level child
• Grid line
• Grid cell
• Grid track grid-template-columns | grid-template-rows
• Grid area
• Grid gap

---

.site {				/* px, em, %, fr (fraction) */
	display: grid;
	grid-gap: 20px;			/* <-- shorthand for: grid-column-gap | grid-row-gap */
	grid-auto-rows: 200px;		/* Gives a height to rows */
				/* implicit grid rows & columns (not explicitly laid out by grid-template-[r|c]) */
	grid-template-columns: 2fr 1fr 1fr;	/* 500px 1fr 1fr */ /* repeat(3, 1fr); */
				/* repeat(auto-fill, 200px); */ /* repeat(auto-fill, minmax(200px,1fr)); */
	grid-template-rows: auto 1fr 3fr;	/* 200px 200px 200px */ /* repeat(3, 200px); */
				/* (lines start at 1) */
	grid-column: 2/4;	/* (start at line 2; thru 4) */
	grid-row: 2/3;		/* (start at line 2; thru 3) */

	grid-template-areas:
	  "title title title"
	  "main header header"
	  "main sidebar footer";
}

/* grid-area: [area-name]; */
	.masthead {
	  grid-area: header;
	}
	.page-title {
	  grid-area: title;
	}
	.main-content {
	  grid-area: main;
	}

/* feature queries */

@supports (display: grid-area-auto) {
	/* `grid` is supported in Edge; `grid-area-auto` is not */
}