Как мне сделать это в два столбца, используя CSS Grid и контейнерный класс? - PullRequest
Новая
       62

Как мне сделать это в два столбца, используя CSS Grid и контейнерный класс?

0 голосов
/ 23 февраля 2020

У меня есть контейнерный класс, который мне нужно использовать на всем моем сайте (стиль Bootstrap). Я не могу поместить display: grid в контейнер и определить столбцы там, потому что мне нужно будет повторно использовать .container. Если я делаю больше делений, это выглядит как перебор.

Итак, как мне взять эти простые UL и P и превратить их в сетку из двух столбцов? 

.container {
    margin: 0 auto;
    padding: 0 15px;
    width: 1170px;
}

.mb1 { margin-bottom: 60px; }
.mb2 { margin-bottom: 100px; }
.mb3 { margin-bottom: 120px; }
.mb4 { margin-bottom: 140px; }


#how-it-works {
    display:grid;
    grid-template-columns: 1fr 2fr;
}
<div id="how-it-works">
    <div class="container">
           <h2>What We Do</h2>
            <ul class="what-we-do">
                <li>This</li>
                <li>A little of that</li>
                <li>Some more of that over there</li>
                <li>Also this</li>
                <li>And wrapping up with this</li>
            </ul>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem ad eveniet explicabo saepe voluptate accusantium neque sint architecto enim, facilis beatae eligendi libero iure similique! Exercitationem commodi ipsa repellendus dolorem illo nobis ad dolor voluptatem iste? Dicta nemo vel impedit excepturi voluptas amet, eaque laborum laudantium cumque eum sit! Obcaecati.</p>
    </div>
</div>

Ответы [ 4 ]

0 голосов
/ 23 февраля 2020

, если вы не можете редактировать html, возможные решения будут выглядеть примерно так: 

ul.what-we-do, 
ul.what-we-do + p {
  float: left;
  box-sizing: border-box;
  width: 50%;
  margin: 0;
  padding: 10px;  //or more or remove this :-) 
}

с плавающей запятой ul и следующие следующие p слева, и у вас есть 2-столбцовая сетка , (это работает, но вы должны настроить некоторые параметры для мобильных устройств и т. д. c.)

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

.two-col {
  display: flex;
  flex-flow: row;
}

.two-col ul,
.two-col p{
  width: 50%;
}
<div id="how-it-works">
    <div class="container">
           <h2>What We Do</h2>
           <div class="two-col">
              <ul class="what-we-do">
                  <li>This</li>
                  <li>A little of that</li>
                  <li>Some more of that over there</li>
                  <li>Also this</li>
                  <li>And wrapping up with this</li>
              </ul>
              <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem ad eveniet explicabo saepe voluptate accusantium neque sint architecto enim, facilis beatae eligendi libero iure similique! Exercitationem commodi ipsa repellendus dolorem illo nobis ad dolor voluptatem iste? Dicta nemo vel impedit excepturi voluptas amet, eaque laborum laudantium cumque eum sit! Obcaecati.</p>
           </div>
    </div>
</div>
0 голосов
/ 23 февраля 2020

Вы можете использовать контейнер flex для достижения этого следующим образом: 

.container {
  display: flex;
}
p {
  flex: 0 200px;
  padding: 20px;
}
<div id="how-it-works">
  <div class="container">
    <ul class="what-we-do">
      <h2>What We Do</h2>
      <li>This</li>
      <li>A little of that</li>
      <li>Some more of that over there</li>
      <li>Also this</li>
      <li>And wrapping up with this</li>
    </ul>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem ad eveniet explicabo saepe voluptate
      accusantium neque sint architecto enim, facilis beatae eligendi libero iure similique! Exercitationem commodi ipsa
      repellendus dolorem illo nobis ad dolor voluptatem iste? Dicta nemo vel impedit excepturi voluptas amet, eaque
      laborum laudantium cumque eum sit! Obcaecati.</p>
  </div>
</div>
0 голосов
/ 23 февраля 2020

Просто дать ему еще один класс? Как containerGrid или что-то? 

.containerGrid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(min-content, max-content);
}

.containerGrid > h2 {
grid-column-start: 1;
grid-column-end: 3;
grid-row: 1;
}

.containerGrid > ul.what-we-do {
grid-column-start: 1;
grid-column-end: 2;
grid-row: 2;
}


.containerGrid > p {
grid-column-start: 2;
grid-column-end: 3;
grid-row: 2;
}
<div id="how-it-works">
    <div class="container containerGrid">
           <h2>What We Do</h2>
            <ul class="what-we-do">
                <li>This</li>
                <li>A little of that</li>
                <li>Some more of that over there</li>
                <li>Also this</li>
                <li>And wrapping up with this</li>
            </ul>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem ad eveniet explicabo saepe voluptate accusantium neque sint architecto enim, facilis beatae eligendi libero iure similique! Exercitationem commodi ipsa repellendus dolorem illo nobis ad dolor voluptatem iste? Dicta nemo vel impedit excepturi voluptas amet, eaque laborum laudantium cumque eum sit! Obcaecati.</p>
    </div>
</div>

Или использовать Flexbox на нем (вы действительно не сказали, что должен делать h2)?

Это также может быть хорошим использование многостолбцовой раскладки, если вы в порядке с p, начинающимся под ul. 

.container {
column-count: 2;
}

.container >h2 {
column-span: all;
}

.container >ul.what-we-do {
display: block;
}

.container >p {
display: block;
}
<div id="how-it-works">
    <div class="container">
           <h2>What We Do</h2>
            <ul class="what-we-do">
                <li>This</li>
                <li>A little of that</li>
                <li>Some more of that over there</li>
                <li>Also this</li>
                <li>And wrapping up with this</li>
            </ul>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem ad eveniet explicabo saepe voluptate accusantium neque sint architecto enim, facilis beatae eligendi libero iure similique! Exercitationem commodi ipsa repellendus dolorem illo nobis ad dolor voluptatem iste? Dicta nemo vel impedit excepturi voluptas amet, eaque laborum laudantium cumque eum sit! Obcaecati.</p>
    </div>
</div>
0 голосов
/ 23 февраля 2020

Я не понимаю, куда вы хотите поместить две колонки. Если вы не хотите добавлять еще один div, переместите класс контейнера в div выше. Кроме того, вы не должны передавать класс grid или flex элементу контейнера. Вы делаете это только внутри контейнера. 

    <div id = "how-it-works" class = "container">
<div class = "row">

, а затем: 

container {
width: ..
max-width: ..
}
.row {
display: grid;
}
...