How can I show three columns per row

Question

I have been trying to show three columns per row  Is it possible using flexbox   My current CSS is something like this    mainDiv       display  flex      margin-left  221px      margin-top  43px      This code puts all content in a single row  I want to add a constraint to just shows three records per row

User · Answer

Try this one using Grid Layout    x000D   x000D   grid-container   x000D    display  grid  x000D    grid-template-columns  auto auto auto  x000D    padding  10px  x000D    x000D   grid-item   x000D    background-color  rgba 255  255  255  0 8   x000D    border  1px solid rgba 0  0  0  0 8   x000D    padding  20px  x000D    font-size  30px  x000D    text-align  center  x000D    x000D   lt div class  grid-container  gt  x000D     lt div class  grid-item  gt 1 lt  div gt  x000D     lt div class  grid-item  gt 2 lt  div gt  x000D     lt div class  grid-item  gt 3 lt  div gt    x000D     lt div class  grid-item  gt 4 lt  div gt  x000D     lt div class  grid-item  gt 5 lt  div gt  x000D     lt div class  grid-item  gt 6 lt  div gt    x000D     lt div class  grid-item  gt 7 lt  div gt  x000D     lt div class  grid-item  gt 8 lt  div gt  x000D     lt div class  grid-item  gt 9 lt  div gt    x000D   lt  div gt  x000D   x000D   x000D

User · Answer

This may be what you are looking for   http   jsfiddle net L4L67    x000D   x000D  body gt div   x000D    background   aaa  x000D    display  flex  x000D    flex-wrap  wrap  x000D    x000D   x000D  body gt div gt div   x000D    flex-grow  1  x000D    width  33   x000D    height  100px  x000D    x000D   x000D  body gt div gt div nth-child even    x000D    background   23a  x000D    x000D   x000D  body gt div gt div nth-child odd    x000D    background   49b  x000D    x000D   lt div gt  x000D     lt div gt  lt  div gt  x000D     lt div gt  lt  div gt  x000D     lt div gt  lt  div gt  x000D     lt div gt  lt  div gt  x000D     lt div gt  lt  div gt  x000D     lt div gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Even though the above answer appears to be correct  I wanted to add a  hopefully  more readable example that also stays in 3 columns form at different widths    x000D   x000D   flex-row-container   x000D      background   aaa  x000D      display  flex  x000D      flex-wrap  wrap  x000D      align-items  center  x000D      justify-content  center  x000D    x000D   flex-row-container  gt   flex-row-item   x000D      flex  1 1 30     grow   shrink   basis    x000D      height  100px  x000D    x000D   x000D   flex-row-item   x000D    background-color   fff4e6  x000D    border  1px solid  f76707  x000D    x000D   lt div class  flex-row-container  gt  x000D     lt div class  flex-row-item  gt 1 lt  div gt  x000D     lt div class  flex-row-item  gt 2 lt  div gt  x000D     lt div class  flex-row-item  gt 3 lt  div gt  x000D     lt div class  flex-row-item  gt 4 lt  div gt  x000D     lt div class  flex-row-item  gt 5 lt  div gt  x000D     lt div class  flex-row-item  gt 6 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Hope this helps someone else

[html] How can I show three columns per row?

Examples related to html

Examples related to css

Examples related to flexbox