Reputation: 45
Im trying to make a mock online store and cannot figure out how to stack an items description with its image. I have everything inside a grid container. I can center each element individually but when I try to stack the image over the desription/drop down/button they create 2 new columns in the box. Is there a way I can put the image on top of the description and then both of those elements on top of the dropdown menu and button?
#column_left{
display: grid;
width:100%;
height: 900px;
border: solid 2px black;
grid-template-rows: 33% 33% 33%;
}
#column_right {
display: grid;
width:100%;
height: 900px;
border: solid 2px black;
}
.item {
border: solid 2px black;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.sample_img {
height: 50%;
width: auto;
}
<div class="item">
<img class="sample_img" src="https://st2.depositphotos.com/3080513/7014/i/600/depositphotos_70144489-stock-photo-t-shirt-template.jpg">
<p>Sticks T-shirt</p>
<label for="size">Choose a Size</label>
<select name="size" class="size" >
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
<button class="addToCart" type="submit">Add to Cart</button>
</div>
Upvotes: 0
Views: 91
Reputation: 10856
Need to use flex-direction
or flex-flow
column
on the parent, in this case .item
.
#column_left {
display: grid;
width: 100%;
height: 900px;
border: solid 2px black;
grid-template-rows: 33% 33% 33%;
}
#column_right {
display: grid;
width: 100%;
height: 900px;
border: solid 2px black;
}
.item {
border: solid 2px black;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 1em;
}
button {
margin-bottom: 1em;
}
.sample_img {
height: 50%;
width: auto;
max-width:100%
}
.item>div:first-child {
text-align: center;
}
<div class="item">
<div>
<img class="sample_img" src="https://st2.depositphotos.com/3080513/7014/i/600/depositphotos_70144489-stock-photo-t-shirt-template.jpg">
<p>Sticks T-shirt</p>
</div>
<label for="size">Choose a Size</label>
<select name="size" class="size">
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
<button class="addToCart" type="submit">Add to Cart</button>
</div>
Upvotes: 1
Reputation: 304
Add this to .item class
flex-direction: column;
in this case, the picture and the rest of the content will be one under the other
.item {
border: solid 2px black;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
Upvotes: 1
Reputation: 621
You should be able to set a flex-direction. You probably don't need to use grid in this situation.
flex-direction: row;
flex-direction: column;
are the two options you will mostly likely choose from. Changing the flex direction will change what justify content and align items do though, essentially reversing them. You can also do row-reverse and column-reverse to make it backwards if you want.
Upvotes: 1