How to prevent shrinking text pushing margins upwards (which would affect the placement of the heading)?

Hercules' Creed 0
Viewed 19

Here is my code:

.starting-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    justify-self: center;
    text-align: center;
    width: 100%;
}
<div class="starting-info">
    <div class="section-info one">
        <img src="one.svg">
        <h3>H1</h3>
        <p>Example1 Example1 Example1</p>
    </div>
    <div class="section-info two">
        <img src="two.svg">
        <h3>H2</h3>
        <p>Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2</p>
    </div>
    <div class="section-info three">
        <img src="three.svg">
        <h3>H3</h3>
        <p>Example3 Example3 Example3 Example3 Example3 Example3</p>
    </div>
    <div class="section-info four">
        <img src="four.svg">
        <h3>H4</h3>
        <p>Example4 Example4 Example4 Example4 Example4 Example4 Example4 Example4 Example4</p>
    </div>
</div>

I've resorted to handling a 2 grid layout before by using media queries and margin adjustments (very lazy I know) but I'm trying out a 4 grid layout here.

Essentially, I am imagining the image and header should stay in place at all times and the text would just extend downwards rather than push the other elements upwards.

Thank you!

css html
1 Answers

you need to define a height for the main container or for all section-info.

* { 
  border: 1px solid red;
}

.starting-info {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-self: center;
  text-align: center;
  width: 100%;
  /* height: 500px; */
  
}

.section-info {
  height: 200px;
}
<div class="starting-info">
    <div class="section-info one">
        <img src="one.svg">
        <h3>H1</h3>
        <p>Example1 Example1 Example1</p>
    </div>
    <div class="section-info two">
        <img src="two.svg">
        <h3>H2</h3>
        <p>Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2</p>
    </div>
    <div class="section-info three">
        <img src="three.svg">
        <h3>H3</h3>
        <p>Example3 Example3 Example3 Example3 Example3 Example3</p>
    </div>
    <div class="section-info four">
        <img src="four.svg">
        <h3>H4</h3>
        <p>Example4 Example4 Example4 Example4 Example4 Example4 Example4 Example4 Example4</p>
    </div>
</div>

Willpower-70
Related