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

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_

.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 > .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_

<div class="flex-row-container">_x000D_
  <div class="flex-row-item">1</div>_x000D_
  <div class="flex-row-item">2</div>_x000D_
  <div class="flex-row-item">3</div>_x000D_
  <div class="flex-row-item">4</div>_x000D_
  <div class="flex-row-item">5</div>_x000D_
  <div class="flex-row-item">6</div>_x000D_
</div>

_x000D_

Hope this helps someone else.

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

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

The answer is

Examples related to html

Examples related to css

Examples related to flexbox

Tags