How to prevent shrinking text pushing margins upwards (which would affect the placement of the headi-CodePudding

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 >
    <div >
        <img src="one.svg">
        <h3>H1</h3>
        <p>Example1 Example1 Example1</p>
    </div>
    <div >
        <img src="two.svg">
        <h3>H2</h3>
        <p>Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2</p>
    </div>
    <div >
        <img src="three.svg">
        <h3>H3</h3>
        <p>Example3 Example3 Example3 Example3 Example3 Example3</p>
    </div>
    <div >
        <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!

CodePudding user response：

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 >
    <div >
        <img src="one.svg">
        <h3>H1</h3>
        <p>Example1 Example1 Example1</p>
    </div>
    <div >
        <img src="two.svg">
        <h3>H2</h3>
        <p>Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2</p>
    </div>
    <div >
        <img src="three.svg">
        <h3>H3</h3>
        <p>Example3 Example3 Example3 Example3 Example3 Example3</p>
    </div>
    <div >
        <img src="four.svg">
        <h3>H4</h3>
        <p>Example4 Example4 Example4 Example4 Example4 Example4 Example4 Example4 Example4</p>
    </div>
</div>