Untitled

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" media="all" href="style.css">
        <link rel="stylesheet" type="text/css" href="grid.css">
        <title>Grid</title>
    </head>
    <body>
     <h1>Grid CSS</h1>
     <div class="grid-container">
        <div class="grid-element item-1">item-1</div>
        <div class="grid-element item-2">item-2</div>
        <div class="grid-element item-3">item-3</div>
        <div class="grid-element item-4">item-4</div>
        <div class="grid-element item-5">item-5</div>
        <div class="grid-element item-6">item-6</div>
        <div class="grid-element item-7">item-7</div>
        <div class="grid-element item-8">item-8</div>
        <div class="grid-element item-9">item-9</div>
        <div class="grid-element item-10">item-10</div>
     </div>

    </body>
</html>

//**************************************************************************
* {
	box-sizing: border-box;
}
body {
    font-size: 1.3em;
    font-family: 'Nunito', sans-serif;
    color: #fff;
    background-color: #e8e9e9;
    padding-left: 5%;
    padding-right: 5%;
}

h1{
	color: #555;
}

.grid-container{
	padding: 10px;
	background-color: #fff;
	border-radius: 5px;
	margin: 45px auto;
	box-shadow: 0 1.5px 0 0 rgba(0,0,0,0.1)
}


.grid-element{
	color: #fff;
	padding: 10px;
	background-color: firebrick;
	border-radius: 5px;
}

.grid-element:nth-child(odd){
		background-color: #eca799;
		color: black;
}