image goes out from grid and sizing issue - css

Question

I'm pretty new to coding, and I'm trying to use a grid.
But I got stuck a little bit.
I have the following codePan project:
* {
box-sizing:border-box
}
body {
height:100vh;
width: 100%;
background-color: red;
padding:0;
margin:0;
}
#wrapper {
background-color:blue;
height:100%;
width:100%;
margin:0;
padding:0;
display: grid;
grid-template-areas:
"nav"
"content"
"footer" ;
grid-template-columns: 1fr;
grid-template-rows: .8fr 1fr .8fr ;
}
#nav {
background-color: yellow;
grid-area: "nav";
position: sticky;
top: 0;
}
#content {
background-color: pink;
grid-area: "nav";
display:flex;
flex-direction: column;
}
footer {
background-color: brown;
grid-area: "nav";
}
#box1 {
background-color:purple;
height:50%;
}
#box2 {
background-color: blue;
height:60%;
display:flex;
flex-direction: column;
}
.image {
height: auto;
width: 400px;
position: relative;
top:-150px;
}
button {
height: 90px;
width: 400px;
background-color: #262A58;
color: white;
font-size: 1.5em;
font-family: 'EightOne';
border-radius: 10px;
border-style: none;
cursor: pointer;
}
<div id="wrapper">
<div id="nav"> nav </div>
<div id="content">
<div id="box1">
<h1>flower</h1>
</div>
<div id="box2">
<img class="image" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.goldpetal.net%2Fmedia%2Fimages%2Fproduct_gallery%2FGerbera_Flower_12.jpg&f=1&nofb=1" alt="">
<button> buy flower </button>
</div>
</div>
<footer>
footer
</footer>
</div>
what i want is the similar like on this picture:
picture
unfortunatly i can not postitioning, the contents in the Box2, becuase the button goes out completly out from grid.
I tried several options, but at the end it was always some issue with the content in the Box2.
if someone could give me an advice. Probably I'm using wrong way Grid...
Thank you!

Answer 1

Let your grid define the size of the areas, and use Flexbox to lay out your content.
You can absolutely achieve this layout with CSS Grid. The button was overflowing its content area because #box2 has a fixed height of 60% of the content grid area, but your .image and the button are taller than that. Basically your image pushes down the button.
You don’t need to set explicit heights on your content, because that’s taken care of the grid.
The white-blue background is a bit tricky, because it doesn’t align exactly with the edges of your image. But you can achieve this affect with a background gradient on your content container.
Check out this working solution as inspiration:
body {
height: 100vh;
padding: 0;
margin: 0;
}
#wrapper {
height: 100%;
width: 100%;
display: grid;
grid-template-areas:
'nav'
'content'
'footer';
grid-template-columns: 1fr;
grid-template-rows: 64px 1fr 96px;
}
#nav {
grid-area: nav;
position: sticky;
top: 0;
background-color: white;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
#content {
grid-area: content;
display: flex;
flex-direction: column;
justify-content: center;
background: linear-gradient(to bottom, transparent 60%, #aad 60%);
align-items: center;
padding: 32px;
}
#content .wrapper {
display: flex;
flex-direction: column;
width: 400px;
}
footer {
grid-area: footer;
}
.image {
border: solid 16px #aad;
margin: 16px;
}
button {
padding: 8px 16px;
background-color: #262a58;
color: white;
font-size: 1.5em;
font-family: 'EightOne';
border-radius: 10px;
border-style: none;
cursor: pointer;
margin-top: 32px;
align-self: center;
}
<div id="wrapper">
<div id="nav">nav</div>
<div id="content">
<div class="wrapper">
<h1>flower</h1>
<img
class="image"
src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.goldpetal.net%2Fmedia%2Fimages%2Fproduct_gallery%2FGerbera_Flower_12.jpg&f=1&nofb=1"
alt="Flower"
/>
<button>buy flower</button>
</div>
</div>
<footer>footer</footer>
</div>

Answer 2

Grid is not really used to make a full webpage. Everything is automatically stacked on top of eachother and should not have a fixed height. The height should changed based on the content.