Flexbox 4 items per row

Question

I m using a flex box to display 8 items that will dynamically resize with my page  How do I force it to split the items into two rows   4 per row    Here is a relevant snip    Or if you prefer jsfiddle - http   jsfiddle net vivmaha oq6prk1p 2     x000D   x000D   parent-wrapper   x000D    height  100   x000D    width  100   x000D    border  1px solid black  x000D    x000D   parent   x000D    display  flex  x000D    font-size  0  x000D    flex-wrap  wrap  x000D    margin  -10px 0 0 -10px  x000D    x000D   child   x000D    display  inline-block  x000D    background  blue  x000D    margin  10px 0 0 10px  x000D    flex-grow  1  x000D    height  100px  x000D    x000D   lt body gt  x000D     lt div class  parent-wrapper  gt  x000D       lt div class  parent  gt  x000D         lt div class  child  gt  lt  div gt  x000D         lt div class  child  gt  lt  div gt  x000D         lt div class  child  gt  lt  div gt  x000D         lt div class  child  gt  lt  div gt  x000D         lt div class  child  gt  lt  div gt  x000D         lt div class  child  gt  lt  div gt  x000D         lt div class  child  gt  lt  div gt  x000D         lt div class  child  gt  lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   x000D

User · Accepted Answer

You ve got flex-wrap  wrap on the container  That s good  because it overrides the default value  which is nowrap  source   This is the reason items don t wrap to form a grid in some cases   In this case  the main problem is flex-grow  1 on the flex items   The flex-grow property doesn t actually size flex items  Its task is to distribute free space in the container  source   So no matter how small the screen size  each item will receive a proportional part of the free space on the line    More specifically  there are eight flex items in your container  With flex-grow  1  each one receives 1 8 of the free space on the line  Since there s no content in your items  they can shrink to zero width and will never wrap   The solution is to define a width on the items  Try this    x000D   x000D   parent   x000D    display  flex  x000D    flex-wrap  wrap  x000D    x000D   x000D   child   x000D    flex  1 0 21      explanation below    x000D    margin  5px  x000D    height  100px  x000D    background-color  blue  x000D    x000D   lt div class  parent  gt  x000D     lt div class  child  gt  lt  div gt  x000D     lt div class  child  gt  lt  div gt  x000D     lt div class  child  gt  lt  div gt  x000D     lt div class  child  gt  lt  div gt  x000D     lt div class  child  gt  lt  div gt  x000D     lt div class  child  gt  lt  div gt  x000D     lt div class  child  gt  lt  div gt  x000D     lt div class  child  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    With flex-grow  1 defined in the flex shorthand  there s no need for flex-basis to be 25   which would actually result in three items per row due to the margins   Since flex-grow will consume free space on the row  flex-basis only needs to be large enough to enforce a wrap  In this case  with flex-basis  21   there s plenty of space for the margins  but never enough space for a fifth item

User · Answer

Add a width to the  child elements  I personally would use percentages on the margin-left if you want to have it always 4 per row   DEMO   child       display  inline-block      background  blue      margin  10px 0 0 2       flex-grow  1      height  100px      width  calc 100     1 4  - 10px - 1px

User · Answer

Flex wrap   negative margin  Why flex vs  display  inline-block    Flex gives more flexibility with elements sizing Built-in white spacing collapsing  see 3 inline-block divs with exactly 33  width not fitting in parent    Why negative margin   Either you use SCSS or CSS-in-JS for the edge cases  i e  first element in column   or you set a default margin and get rid of the outer margin later   Implementation  https   codepen io zurfyx pen BaBWpja   lt div class  outerContainer  gt       lt div class  container  gt           lt div class  elementContainer  gt               lt div class  element  gt               lt  div gt           lt  div gt                   lt  div gt   lt  div gt     root     --columns  2    --betweenColumns  20px     This value is doubled when no margin collapsing        outerContainer       overflow  hidden     Hide the negative margin        container       background-color  grey      display  flex      flex-wrap  wrap      margin  calc -1   var --betweenColumns        elementContainer       display  flex     To prevent margin collapsing        width  calc 1 var --columns    100  - 2   var --betweenColumns        margin  var --betweenColumns       element       display  flex      border  1px solid red      background-color  yellow      width  100       height  42px

User · Answer

I would do it like this using negative margins and calc for the gutters    parent     display  flex    flex-wrap  wrap    margin-top  -10px    margin-left  -10px      child     width  calc 25  - 10px     margin-left  10px    margin-top  10px      Demo  https   jsfiddle net 9j2rvom4     Alternative CSS Grid Method    parent     display  grid    grid-template-columns  repeat 4  1fr     grid-column-gap  10px    grid-row-gap  10px      Demo  https   jsfiddle net jc2utfs3

User · Answer

Hope it helps  for more detail you can follow this Link  x000D   x000D   parent     display  flex     flex-wrap  wrap       parent  child     flex  1 1 25       Start Run Code Snippet output CSS     padding  5px     box-sizing  border-box    text-align  center    border  1px solid  000      End Run Code Snippet output CSS     x000D   lt div class  parent  gt     lt div class  child  gt 1 lt  div gt     lt div class  child  gt 2 lt  div gt     lt div class  child  gt 3 lt  div gt     lt div class  child  gt 4 lt  div gt     lt div class  child  gt 5 lt  div gt     lt div class  child  gt 6 lt  div gt     lt div class  child  gt 7 lt  div gt     lt div class  child  gt 8 lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

I believe this example is more barebones and easier to understand then  dowomenfart    child       display  inline-block      margin  0 1em      flex-grow  1      width  calc 25  - 2em       This accomplishes the same width calculations while cutting straight to the meat  The math is way easier and em is the new standard due to its scalability and mobile-friendliness

User · Answer

x000D   x000D   parent-wrapper   x000D   height  100   x000D   width  100   x000D   border  1px solid black  x000D    x000D    parent   x000D   display  flex  x000D   font-size  0  x000D   flex-wrap  wrap  x000D   margin-right  -10px  x000D   margin-bottom  -10px  x000D    x000D    child   x000D   background  blue  x000D   height  100px  x000D   flex-grow  1  x000D   flex-shrink  0  x000D   flex-basis  calc 25  - 10px   x000D    x000D    child nth-child even    x000D   margin  0 10px 10px 10px  x000D   background-color  lime  x000D    x000D    child nth-child odd    x000D   background-color  orange   x000D    x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D    lt meta charset  UTF-8  gt  x000D    lt title gt Document lt  title gt  x000D    lt style type  text css  gt  x000D   x000D    lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D     lt div class  parent-wrapper  gt  x000D       lt div class  parent  gt  x000D         lt div class  child  gt  lt  div gt  x000D         lt div class  child  gt  lt  div gt  x000D         lt div class  child  gt  lt  div gt  x000D         lt div class  child  gt  lt  div gt  x000D         lt div class  child  gt  lt  div gt  x000D         lt div class  child  gt  lt  div gt  x000D         lt div class  child  gt  lt  div gt  x000D         lt div class  child  gt  lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Here is another apporach   You can accomplish it in this way too    parent    display  flex    flex-wrap  wrap      child    width  25     box-sizing  border-box      Sample  https   codepen io capynet pen WOPBBm  And a more complete sample  https   codepen io capynet pen JyYaba

User · Answer

Here s another way without using calc        4 PER ROW    100 divided by 4 is 25  Let s use 21  for width  and the remainder 4  for left  amp  right margins     child     margin  0 2  0 2     width  21         3 PER ROW    100 divided by 3 is 33 3333    Let s use 30  for width  and remaining 3 3333  for sides  hint  3 3333   2   1 66666   child     margin  0 1 66666  0 1 66666     width  30         and so on    That s all there is to it  You can get fancy with the dimensions to get a more aesthetic sizes but this is the idea

[html] Flexbox: 4 items per row

Examples related to html

Examples related to css

Examples related to flexbox