How do I get items in a div to stack vertically-CodePudding

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 >
    <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"  >
        <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  type="submit">Add to Cart</button>

</div>

CodePudding user response：

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;
}

CodePudding user response：

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.

CodePudding user response：

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;
}

.item>div:first-child {
  text-align: center;
}

<div >
  <div>
    <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" >
    <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  type="submit">Add to Cart</button>
</div>