Kevin Powell - Community•2y ago

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•2y 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>

MuhctOP•2y ago

thank you!

Gaming

Programming

Creating a 2-column 2-row flexbox structure