выравнивание текста по сетке в начальной загрузке

Question

Я пытаюсь создать веб-сайт, но у меня возникают проблемы с выравниванием текста. Я начинаю чувствовать, что это невозможно с системой сетки начальной загрузки.

Вот мой результат и мой текущий код:

<div class="row">
    <div class="col-md-3 text-center logo">
        <img src="img/LogoMedium.jpg">
    </div>

    <div class="col-md-3 text-center">
        <table class="case">
            <tbody>
                <tr>
                    <td>Case ID</td>
                    <td class="alt">#1</td>
                </tr>
                <tr>
                    <td>Title</td>
                    <td class="alt">Lorem ipsum</td>
                </tr>
                <tr>
                    <td>Location</td>
                    <td class="alt">Earth</td>
                </tr>
                <tr>
                    <td>Tags</td>
                    <td class="alt">&nbsp;</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="col-md-6">
        <div id="mapid"></div>
    </div>

    <div class="col-md-6">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

Я надеюсь, что смогу найти способ, чтобы он выглядел примерно так:

Независимо от того, что я пытаюсь, карта продолжает форсироватьдругие столбцы в строке имеют слишком большую высоту, и это толкает текст дальше вниз. Любая помощь приветствуется, спасибо

Answer 1

Вы правы, это невозможно. Это связано с тем, что такого рода сеточная система работает в макете потока css . Чтобы получить то, что вы хотите, вам нужно использовать float.

Вот быстрый и грязный пример:

.main {
  max-width: 800px;
}

.main div {
  background: #BADA55;
  min-height: 100px;
  margin-bottom: 12px;
}

.header {
  display: grid;
  grid-gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}

.logo, .text {
  width: 100%;
}

.map {
  width: 50%;
  height: 250px;
  margin-left: 12px;
  float: right;
}

<div class="main">
  <div class="map"></div>
  
  <header class="header">
    <div class="logo"></div>
    <div class="text"></div>
  </header>
  
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus? Quam aliquid maiores cum, harum quis, ratione dolores, commodi rerum reiciendis aut ipsa? Labore dicta nemo consequuntur, a repellat saepe? Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus? Quam aliquid maiores cum, harum quis, ratione dolores, commodi rerum reiciendis aut ipsa? Labore dicta nemo consequuntur, a repellat saepe?
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus? Quam aliquid maiores cum, harum quis, ratione dolores, commodi rerum reiciendis aut ipsa? Labore dicta nemo consequuntur, a repellat saepe?
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus? Quam aliquid maiores cum, harum quis, ratione dolores, commodi rerum reiciendis aut ipsa? Labore dicta nemo consequuntur, a repellat saepe?Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus? Quam aliquid maiores cum, harum quis, ratione dolores, commodi rerum reiciendis aut ipsa? Labore dicta nemo consequuntur, a repellat saepe?
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, delectus? Quam aliquid maiores cum, harum quis, ratione dolores, commodi rerum reiciendis aut ipsa? Labore dicta nemo consequuntur, a repellat saepe?
  
  
</div>