[FIXED] how to fit three svg image equally in three grid col under one row

Issue

It has been a month now since I work with the following issue but not succeed. I have three svg images with less difference in size and trying to fit them into one row adding them to different columns.

But unfortunately, the top text and those images are not fit equally. some get high padding top some bottom. I know the reason SVG width. I need help please.

<div id="section-top-homepage">
<div class="row circular-wrap text-center">
<div class="col-md-4 col-sm-4 top15"><img alt="" data-entity-type="file" height="67" src="/sites/default/files/inline-images/vision.svg" width="71" />
<h3 class="whitecolor top15">Vision</h3>
</div>

<div class="col-md-4 col-sm-4 top15"><img alt="" data-entity-type="file" height="72" src="/sites/default/files/inline-images/objectives.svg" width="73" />
<h3 class="whitecolor top15">Objectives</h3>
</div>

<p>&nbsp;</p>

<div class="col-md-4 col-sm-4 top15"><img alt="" data-entity-type="file" height="59" src="/sites/default/files/inline-images/mission.svg" width="72" />
<h3 class="whitecolor top15">Mission</h3>
</div>
</div>
</div>

Solution

Alignment in your example is made tricky because each image and its corresponding text reside inside the same div. If the outer division is the grid container, the grid items are the child divs, not the images or text.

By making the h3 tags direct children of the outer div container, they become grid items equivalent to the divs wrapping each image, giving a total of six grid items that can be arranged in three columns:

<div class="grid-container">

  <div class="image-container>
    <img .../>
  </div>

  <div class="image-container>
    <img .../>
  </div>

  <div class="image-container>
    <img .../>
  </div>  

  <h3 class="image-label">
  <h3 class="image-label">
  <h3 class="image-label">

</div>

Notice the three h1 elements follow the three image divs - the six grid-items (all direct children of the grid container) will flow across the 'cells' created by the grid template specified for the grid container:

css:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

Because three (equal) columns are specified, the first three items (the div image containers) occupy the three 'cells' of the top row. The next three items (the h3 labels) are pushed into the second row.

Each grid item can be made a flex container, allowing the position of the images relative to their div containers to be further refined. The containers themselves, including the labels, will always be aligned across the rows and down the columns.

The following working snipped applies the above principles to your example:

img {
  background: yellow;
}

.container {
  background: red;
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 3px 50px;
  padding: 5%;
}

.container>div,.container>h3{
  border: 3px solid green;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin: 0;
  padding: 5px;
}

<div id="section-top-homepage">
<h2> grid items shown with green borders</h2>
<div class="row circular-wrap text-center container">
<div class="col-md-4 col-sm-4 top15"><img alt="" data-entity-type="file" height="67" src="/sites/default/files/inline-images/vision.svg" width="71" />
</div>
<div class="col-md-4 col-sm-4 top15"><img alt="" data-entity-type="file" height="72" src="/sites/default/files/inline-images/objectives.svg" width="73" />

</div>
<div class="col-md-4 col-sm-4 top15"><img alt="" data-entity-type="file" height="59" src="/sites/default/files/inline-images/mission.svg" width="72" />
</div>

<h3 class="whitecolor top15">Vision</h3>
<h3 class="whitecolor top15">Objectives</h3>
<h3 class="whitecolor top15">Mission</h3>
</div>
<p>The red area is a grid <i>container</i> specifying three equally spaced columns. The grid <i>items</i> are the direct children of the container (shown with green borders). 
<p>Each grid item is a <i>flex</i> container, allowing its content to be aligned and justified. The above example has the content aligned and justified to center. The content could be aligned by its baseline by changing the css <i>align-items</i> property to <i>flex-end</i></p>
<p>in addition to the grid-template, the css for the grid-container specifies the gap between items across rows and beteen rows. The left, right, top, and bottom space surrounding the grid items is specified by the padding applied to the grid container. 
</div>

Answered By - Dave Pritlove

Answer Checked By - David Goodson (PHPFixing Volunteer)