How do I display elements in rows?

RayGun URL

Right now it’s currently a vertical list. How can I have it be 4 rows of 3 elements each?

Sorry if this is a newbie question, but thanks!!

There are 3 ways to implement this:

  1. Floating Way
  2. Flex Way
  3. Grid Way

let’s take the HTML structure below for all of the methods mentioned above:

<ul class='parent'>
      <li class='child'>1</li>
      <li class='child'>2</li>
      <li class='child'>3</li>
      <li class='child'>4</li>
      <li class='child'>5</li>
      <li class='child'>6</li>
      <li class='child'>7</li>
      <li class='child'>8</li>
      <li class='child'>9</li>
      <li class='child'>10</li>
      <li class='child'>11</li>
      <li class='child'>12</li>

let’s give them some basic CSS style rules

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
.parent {
  list-style-type: none;
  padding: 20px;
  background: goldenrod;
.child {
  color: white;
  padding: 10px;
  background: teal;
  margin: 10px;

1. Floating way

.parent::after {
  content: '';
  display: block;
  clear: both; /* to clear out the floating */
.child {
  width: calc(33.33% - 20px); /* 10px margin on the left plus 10px margin on the right */
  float: left;

2. Flex way

.parent {
  display: flex;
  flex-wrap: wrap;
.child {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(33.33% - 20px);

3. Grid way

.parent {
  display: grid;
  grid-gap: 20px;
  justify-content: center;
  grid-template-columns: repeat(3, calc(33.33% - 20px));
.child {
  margin: 0; /* because we have grid-gap */

all of the above would create this: :arrow_down:

Hope I addressed your question well.