aula17.css

/* Grid */
.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 50px;
}

/* 1 */

.grid-area-1 .item-1 {
	grid-area: 1 / 2 / 4 / 3;
	grid-row-start: 1;
	grid-column-start: 2;
	grid-row-end: 4;
	grid-column-end: 3;
}

.grid-area-1 .item-5 {
	grid-area: span 2 / 3;
	grid-row-start: span 2;
	grid-column-start: 3;
}

/* 2 */

.grid-area-2 {
	grid-template-areas:
		"header header header"	
		"sidenav content ads"	
		"sidenav footer footer"	
	;
}

.grid-area-2 .item-1 {
	grid-area: header;
}

.grid-area-2 .item-2 {
	grid-area: sidenav;
}

.grid-area-2 .item-3 {
	grid-area: content;
}

.grid-area-2 .item-4 {
	grid-area: ads;
}

.grid-area-2 .item-5 {
	grid-area: footer;
}

/* 3 */

.grid-area-3 {
	grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}

.grid-area-3 .item-1 {
	grid-row: 2 / 4;
	grid-column: 2 / 5;
	background: rgb(255,0,0);
	mix-blend-mode: screen;
}

.grid-area-3 .item-2 {
	grid-area: 3 / 3 / span 3 / 5;
	background: rgb(0,255,0);
	mix-blend-mode: screen;
}

.grid-area-3 .item-12 {
	grid-row-start: 1;
	grid-column-start: 4;
	grid-row-end: 7;
	grid-column-end: 6;
	background: rgb(0,0,255);
	mix-blend-mode: screen;
}

/* Grid Item */
.item {
	margin: 5px;
	background: tomato;
	text-align: center;
	font-size: 1.5em;
}

.grid {
	max-width: 400px;
	margin: 0 auto;
	border: 1px solid #ccc;
}

h1 {
	text-align: center;
	font-size: 1.25em;
	font-weight: normal;
}

body {
	font-family: monospace;
	color: #333;
	padding-bottom: 60px;
	margin: 0px;
}

body > div {
	padding: 40px 0;
}

body > div:nth-of-type(even) {
	background: rgba(0,0,0,.03);
}

body > div > img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
}

img {
	display: block;
	margin: 0 auto;
}