KPC
Kevin Powell - Community•3y ago
Muhct

Creating a 2-column 2-row flexbox structure

Hi there, how can I create a 2-column 2-row flexbox structure? Here's a pic of what I mean, and also the code of what I have so far: https://codesandbox.io/s/2-column-2-row-pnk4rw?file=/styles.css
hex11
CodeSandbox
2-column 2-row - CodeSandbox
No. 3
2 Replies
b1mind
b1mind•3y ago
Use grid? 😄 It would be the right tool for this, imo. sidenote: don't use headings for visual changes, only semantic meaning. If you want small titles make a class for em. I realize this is just a demo but 
.container {
  display: grid; 
  grid-template-columns: repeat(2, 1fr);
  padding: 30px 60px;
}
.container {
  display: grid; 
  grid-template-columns: repeat(2, 1fr);
  padding: 30px 60px;
}
I would honestly use/learn grid BUT if you really wanted to use flex I would just change the dom though and add another container for new row 
  <div class="container">
    <div class="column">
      <h5>Lorem Ipsum Title</h3>
      <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h5>
    </div>
    <div class="column">
      <h3>Lorem Ipsum Title</h3>
      <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h5>
    </div>
  </div>
  <div class="container">
    <div class="column">
      <h3>Lorem Ipsum Title</h3>
      <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h5>
    </div>
    <div class="column">
      <h3>Lorem Ipsum Title</h3>
      <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h5>
    </div>
  </div>
  <div class="container">
    <div class="column">
      <h5>Lorem Ipsum Title</h3>
      <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h5>
    </div>
    <div class="column">
      <h3>Lorem Ipsum Title</h3>
      <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h5>
    </div>
  </div>
  <div class="container">
    <div class="column">
      <h3>Lorem Ipsum Title</h3>
      <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h5>
    </div>
    <div class="column">
      <h3>Lorem Ipsum Title</h3>
      <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h5>
    </div>
  </div>
Muhct
MuhctOP•3y ago
thank you!

Did you find this page helpful?