How do I display elements in rows?

HTML-CSS
1

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!!

2

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>
</ul>

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:

grids
grids1132×256 1.72 KB

Hope I addressed your question well.