Как выровнять элементы

135

30 ноября 2018, 11:10

Как выровнять элементы в строках? Дело в том, что заголовки разного размера и все плывет. Поломал всю голову, кроме как переделать все в css grid - сделать 18 ячеек - ничего на ум не приходит. ссылка на код codepen

        <div class="pre1">
        <div class="pre01  d1">
                        <h2>Unique Custom Designs </h2>
                        <div class="preris">
                        </div>
            <span>Our designs are built from the ground up using the latest design software. We take pride in creating fresh, sleek websites with our template-free approach. </span>
            </div>
        <div class="pre02 d1">
                        <h2>Clean & Powerful Code </h2>
                        <div class="preris">
                        </div>

            <span>Different coding languages fit different projects. Our expert developers are highly experienced in multiple coding languages and rise to any given challenge - nothing is impossible. </span>
            </div>
        <div class="pre03  d1">
                        <h2>User Friendly Interfaces </h2>
                        <div class="preris">
                        </div>

            <span>verything we create is built on the foundation of user experience elements. Our designs aren’t just pretty-looking, but are structured to perform intuitively too. </span>
            </div>
        <div class="pre04 d1">
                        <h2>Responsive Grid System </h2>
                        <div class="preris">
                        </div>

            <span>We’re not fussy - we love all devices equally! Whether it’s fruit-based, space-themed, or anything in between, our websites look best on whatever your visitors choose to use.  </span>
        </div>
        <div class="pre05 d1">
                        <h2>Retina <br>HD Ready </h2>
                        <div class="preris">
                        </div>
            <span>We want to look stunning day and night. Our designs are created with up-to-the-minute functionality, super sharp and ready to roll on fifty-foot billboards or 3-inch screens.   </span>
        </div>
        <div class="pre06 d1">
                        <h2>Content Management Systems</h2>
                        <div class="preris">
                        </div>

            <span>Blogs? Articles? Fresh meat? New work? Whatever you need to regularly update, we make it possible from your end with easy-to-use, customisable CMS. </span>
        </div>

    </div>

Answer 1

Поссмотри, может так сойдёт тык

    <div class="container">
  <div class="row">
    <div class="col-sm-12 col-xs-12 col-md-4 col-lg-3">
      <div class="pre01  d1">
                <h2>Unique Custom</h2>
                <div class="preris"></div>
                <span>
          Our designs are built from the ground up using the latest design           software. We take pride in creating fresh, sleek websites with             our template-free approach. 
        </span>
            </div>
    </div>
    <div class="col-sm-12 col-xs-12 col-md-4 col-lg-3">
      <div class="pre01  d1">
                <h2>Unique Custom Designs </h2>
                <div class="preris"></div>
                <span>
          Our designs are built from the ground up using the latest design           software. We take pride in creating fresh, sleek websites with             our template-free approach. 
        </span>
            </div>
    </div>
    <div class="col-sm-12 col-xs-12 col-md-4 col-lg-3">
      <div class="pre01  d1">
                <h2>Unique Custom Designs </h2>
                <div class="preris"></div>
                <span>
          Our designs are built from the ground up using the latest design           software. We take pride in creating fresh, sleek websites with             our template-free approach. 
        </span>
            </div>
    </div>
    <div class="col-sm-12 col-xs-12 col-md-4 col-lg-3">
      <div class="pre01  d1">
                <h2>Unique Custom Designs </h2>
                <div class="preris"></div>
                <span>
          Our designs are built from the ground up using the latest design           software. We take pride in creating fresh, sleek websites with             our template-free approach. 
        </span>
            </div>
    </div>
    <div class="col-sm-12 col-xs-12 col-md-4 col-lg-3">
      <div class="pre01  d1">
                <h2>Unique Custom Designs </h2>
                <div class="preris"></div>
                <span>
          Our designs are built from the ground up using the latest design           software. We take pride in creating fresh, sleek websites with             our template-free approach. 
        </span>
            </div>
    </div>
    <div class="col-sm-12 col-xs-12 col-md-4 col-lg-3">
      <div class="pre01  d1">
                <h2>Unique Custom Designs </h2>
                <div class="preris"></div>
                <span>
          Our designs are built from the ground up using the latest design           software. We take pride in creating fresh, sleek websites with             our template-free approach. 
        </span>
            </div>
    </div>
  </div>
</div>

Answer 2

решил с помощью вычисления высоты заголовка и задания отступа вычисленного на этой основе. сделано с помощью jq (5 строк кода)