<h1>Working on my grid</h1>
	<button type="sumbit">next picture</button>
	<button type="sumbit">previous picture</button>
	<div class="wrapper">
		<div>
			<img src="https://cdn1.matadornetwork.com/blogs/1/2020/12/Banded-Brewing-Co-Biddefor-Maine.jpg"  />
		</div>
		<div class="two">
			<img src="https://cdn1.matadornetwork.com/blogs/1/2020/12/Banded-Brewing-Co-Biddefor-Maine.jpg" />
		</div>
		<div>
			<img src="https://cdn1.matadornetwork.com/blogs/1/2020/12/Banded-Brewing-Co-Biddefor-Maine.jpg"  />
		</div>
		<div>
			<img src="https://cdn1.matadornetwork.com/blogs/1/2020/12/Banded-Brewing-Co-Biddefor-Maine.jpg"  />
		</div>
		<div>
			<img src="https://cdn1.matadornetwork.com/blogs/1/2020/12/Banded-Brewing-Co-Biddefor-Maine.jpg"  />
		</div>
		<div>
			<img src="https://cdn1.matadornetwork.com/blogs/1/2020/12/Banded-Brewing-Co-Biddefor-Maine.jpg"  />
		</div>
		<div>
			<img src="https://cdn1.matadornetwork.com/blogs/1/2020/12/Banded-Brewing-Co-Biddefor-Maine.jpg"  />
		</div>
		<div>
			<img src="https://cdn1.matadornetwork.com/blogs/1/2020/12/Banded-Brewing-Co-Biddefor-Maine.jpg"  />
		</div>
		<div>
			<img src="https://cdn1.matadornetwork.com/blogs/1/2020/12/Banded-Brewing-Co-Biddefor-Maine.jpg"  />
		</div>
	</div>

body{
  font-size: 50px;
  text-align: center;
  direction: rtl;
}
h1{
  color: brown;
  font-family: David;
  margin-bottom: 20px;
}

button{
  margin-bottom: 50px;
  font-size: 30px;
  font-family: cursive;
}

.wrapper{
  border: 15px solid black;
  display: grid;
  max-width: 100%;
  color: #fff;
  grid-template-columns: repeat(8, 1fr);
  grid-gap: 20px 20px;
  grid-template-rows: calc(70%-10px) calc(30%-10px);
  grid-template-areas:
    "one one one one one one one one"
    "two three four five six seven eight nine";
}

img {
  max-width: 100%;
}

.wrapper div:first-child{
  grid-area: one;
}

.wrapper div:nth-child(2){
  grid-area: two;
}

.wrapper div:nth-child(3){
  grid-area: three;
}
.wrapper div:nth-child(4){
  grid-area: four;
}
.wrapper div:nth-child(5){
  grid-area: five;
}
.wrapper div:nth-child(6){
  grid-area: six;
}
.wrapper div:nth-child(7){
  grid-area: seven;
}
.wrapper div:nth-child(8){
  grid-area: eight;
}
.wrapper div:last-child{
  grid-area: nine;
}