CODEWITHSUNDEEP
htmlcssgridflexbox
deroccha
deroccha

Reputation: 1183

Creating a two-column grid with flexbox

I'm trying to use flexbox to align articles in 2 columns, but somehow I can't get it working. How do I create a 2-column grid with flexbox?

The following example illustrates what I was trying before:

.container {
    display:flex;
}

.post {
    flex:1 0 50%
}
<div class="container">

<article class="post">
   <header> <h1>Title</h1></header>
  <p> Vestibulum tincidunt, eros vel iaculis dictum, turpis nulla rhoncus velit, sed blandit nulla lorem sed justo. Etiam enim augue, volutpat ac faucibus eu, fermentum viverra lorem. Integer tempor ac nisi sit amet pellentesque. Sed convallis tempor augue vitae placerat. Morbi ultricies bibendum dolor, nec interdum lorem efficitur quis. Maecenas pharetra enim ut venenatis dictum. Phasellus varius lobortis ante, id blandit lectus rhoncus id. Aliquam consectetur ex nec ex volutpat, finibus dignissim sem mattis.

Nunc convallis at nunc a ultricies. Proin vulputate accumsan elit eu convallis. Curabitur porttitor dui sodales, aliquam ex ut, iaculis diam. Donec vulputate maximus eleifend. Vivamus eu purus nunc. Vivamus neque nisl, faucibus in risus vitae, consequat dignissim eros. Duis in massa at turpis tincidunt vestibulum. Nulla varius non leo vestibulum laoreet. Nulla facilisi. Maecenas vulputate massa ut metus iaculis lacinia vel in arcu. Etiam id vehicula massa. Nulla imperdiet sapien id condimentum euismod. </p>
</article>
  
  <article class="post">
   <header> <h1>Title</h1></header>
  <p> Vestibulum tincidunt, eros vel iaculis dictum, turpis nulla rhoncus velit, sed blandit nulla lorem sed justo. Etiam enim augue, volutpat ac faucibus eu, fermentum viverra lorem. Integer tempor ac nisi sit amet pellentesque. Sed convallis tempor augue vitae placerat. Morbi ultricies bibendum dolor, nec interdum lorem efficitur quis. Maecenas pharetra enim ut venenatis dictum. Phasellus varius lobortis ante, id blandit lectus rhoncus id. Aliquam consectetur ex nec ex volutpat, finibus dignissim sem mattis.

Nunc convallis at nunc a ultricies. Proin vulputate accumsan elit eu convallis. Curabitur porttitor dui sodales, aliquam ex ut, iaculis diam. Donec vulputate maximus eleifend. Vivamus eu purus nunc. Vivamus neque nisl, faucibus in risus vitae, consequat dignissim eros. Duis in massa at turpis tincidunt vestibulum. Nulla varius non leo vestibulum laoreet. Nulla facilisi. Maecenas vulputate massa ut metus iaculis lacinia vel in arcu. Etiam id vehicula massa. Nulla imperdiet sapien id condimentum euismod. </p>
</article>
  
  <article class="post">
   <header> <h1>Title</h1></header>
  <p> Vestibulum tincidunt, eros vel iaculis dictum, turpis nulla rhoncus velit, sed blandit nulla lorem sed justo. Etiam enim augue, volutpat ac faucibus eu, fermentum viverra lorem. Integer tempor ac nisi sit amet pellentesque. Sed convallis tempor augue vitae placerat. Morbi ultricies bibendum dolor, nec interdum lorem efficitur quis. Maecenas pharetra enim ut venenatis dictum. Phasellus varius lobortis ante, id blandit lectus rhoncus id. Aliquam consectetur ex nec ex volutpat, finibus dignissim sem mattis.

Nunc convallis at nunc a ultricies. Proin vulputate accumsan elit eu convallis. Curabitur porttitor dui sodales, aliquam ex ut, iaculis diam. Donec vulputate maximus eleifend. Vivamus eu purus nunc. Vivamus neque nisl, faucibus in risus vitae, consequat dignissim eros. Duis in massa at turpis tincidunt vestibulum. Nulla varius non leo vestibulum laoreet. Nulla facilisi. Maecenas vulputate massa ut metus iaculis lacinia vel in arcu. Etiam id vehicula massa. Nulla imperdiet sapien id condimentum euismod. </p>
</article>
  
  <article class="post">
   <header> <h1>Title</h1></header>
  <p> Vestibulum tincidunt, eros vel iaculis dictum, turpis nulla rhoncus velit, sed blandit nulla lorem sed justo. Etiam enim augue, volutpat ac faucibus eu, fermentum viverra lorem. Integer tempor ac nisi sit amet pellentesque. Sed convallis tempor augue vitae placerat. Morbi ultricies bibendum dolor, nec interdum lorem efficitur quis. Maecenas pharetra enim ut venenatis dictum. Phasellus varius lobortis ante, id blandit lectus rhoncus id. Aliquam consectetur ex nec ex volutpat, finibus dignissim sem mattis.

Nunc convallis at nunc a ultricies. Proin vulputate accumsan elit eu convallis. Curabitur porttitor dui sodales, aliquam ex ut, iaculis diam. Donec vulputate maximus eleifend. Vivamus eu purus nunc. Vivamus neque nisl, faucibus in risus vitae, consequat dignissim eros. Duis in massa at turpis tincidunt vestibulum. Nulla varius non leo vestibulum laoreet. Nulla facilisi. Maecenas vulputate massa ut metus iaculis lacinia vel in arcu. Etiam id vehicula massa. Nulla imperdiet sapien id condimentum euismod. </p>
</article>


</div>

Upvotes: 4

Views: 146

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 370993

You were almost there. You just needed to add flex-wrap: wrap to the container.

DEMO: http://jsfiddle.net/mox4m08c/

When you create a flexbox several default rules come into play.

One rule says that all flex items will align in a row (default: flex-direction: row).

Another rule says that flex items cannot wrap (default: flex-wrap: nowrap).

You need to specify flex-wrap: wrap in order to override the default.

flex-wrap

The CSS flex-wrap property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines.

Initial value: nowrap

If you wish to switch the alignment from row to column for smaller screens, make an adjustment to flex-direction using a media query.

@media screen and ( max-width: 500px ) {
    .container { flex-direction: column; }
}

DEMO: http://jsfiddle.net/mox4m08c/1/

Upvotes: 3

Related Questions