CODEWITHSUNDEEP
htmlcssflexbox
Ethan
Ethan

Reputation: 113

3 column grid in Flexbox

I am currently attempting to create a 3 column grid layout for cards and was wondering if there was a way to do this within Flex Box. I am trying to get Box 4 under Box 1.

HTML Code:

  <div id="boxes">

    <div class="box">
      <h1>Box 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
    </div>

    <div class="box">
      <h1>Box 2</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
    </div>

    <div class="box">
      <h1>Box 3</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
    </div>

    <div class="box">
      <h1>Box 4</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
    </div>

  </div>

CSS Code:

#boxes {
  display:flex;
  flex-wrap:wrap;
  .box {
    flex:1;
    border:1px solid black;
  }
}

enter image description here

Upvotes: 1

Views: 384

Answers (1)

Edmundo Santos
Edmundo Santos

Reputation: 613

Set the width of the .box element and flex-basis to auto. The flex-basis property defines the default size of an element before the remaining space is distributed. The auto keyword means “look at my width or height property”.

If you don't want the last element to take the available space use flex-grow: 0, that prevents the element to grow, so all your boxes will have the same width.

You can use the flex shorthand property to set all values (flex: 0 1 auto – note that this is the default value for flex), see demo below:

#boxes {
  display: flex;
  flex-wrap: wrap;
}

#boxes .box {
  flex: 0 1 auto;
  width: calc(100% / 3);
  outline: 1px solid black;
}
<div id="boxes">
  <div class="box">
    <h1>Box 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="box">
    <h1>Box 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="box">
    <h1>Box 3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="box">
    <h1>Box 4</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

I also replaced the border property with outline because the border adds to the width.

For learning more about the Flexible Layout module read Chris Coyier’s excellent Guide to Flexbox.

Upvotes: 4

Related Questions