How do I make this into two columns using CSS Grid and a container class?

Question

I have a container class that I need to use all over my site (think Bootstrap style). I can't put the display:grid on the container and define columns there because I'll need to reuse.container. If I make more divs it just seems like overkill.

So, how can I take this simle UL and P and turn them into a two column grid?

 .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>

Answer 1

I don't understand where you want to put two columns. If you don't want to add another div, move the container class to the div above. Also, you shouldn't give the grid or flex class to the container element. You do it only inside the container.

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

and then:

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

Answer 2

you can use a flex container to achieve that as follows:

 .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>

Answer 3

Just give it another class? Like containerGrid or something?

 .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>

Or use Flexbox on it (you haven't really said what h2 should do)?

This could also be a good use of multi column layout if you're okay with p starting underneath of 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>

Answer 4

if you cant edit the html, a possible solutions would be something like this:

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 :-) 
}

float the ul and the next following p left and you have a 2 column grid. (it's working, but you have to adjust maybe some things for mobile etc.)

The better solution would be, in my opinion, edit the HTML structure for example like that:

 .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>