css grid fun

by Artem

HTML

<div class="wrapper">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
	<div>11</div>
	<div>12</div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

body {
	background-color: #272727;
}

.wrapper {
	display: grid;
	grid-row-gap: 10px;
	grid-column-gap: 10px;
	grid-auto-rows: 100px;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.wrapper > * {
	background-color: #747474;
	padding: 5px;
	border-radius: 4px;
	color: #272727;
	display: flex;
	place-content: center;
	place-items: center;
	
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	line-height: 1.6;;
	box-shadow: 0px 0px 1px #000;
}


.wrapper > *:nth-child(3) {
	background-color: #ff652f;
	grid-column-start: 3;
	grid-column-end: 5;
	grid-row: span 2;
}