How to arrange product cards evenly spaced

I will show you how to arrange the product cards evenly. I want to arrange products as cards, but is there an easy way to arrange them evenly on the left and right?

Flex layout, less description, smartphone, IE11 compatible method.

Arrange product cards evenly spaced

First of all, set multi-line flex layout. This time, let's line up in two rows.

Yakiniku
Yakitori
salad
tea

<ul style = "display: flex; flex-wrap: wrap;">
  <li style = "width: 50%; border: 1px solid green;"> Yakiniku </li>
  <li style = "width: 50%; border: 1px solid green;"> Yakitori </li>
  <li style = "width: 50%; border: 1px solid green;"> salad </li>
  <li style = "width: 50%; border: 1px solid green;"> tea </li>
</ul>

Set the left and right margins

Suppose you want to have an even spacing of 10px between the cards and to the left and right of the outermost ul. First, let's take 10px on the left and right of the ul of the outer frame.

Yakiniku
Yakitori
salad
tea

<ul style = "display: flex; flex-wrap: wrap; width: calc (100%--10px --10px); margin-left: auto; margin-right: auto;">
  <li style = "width: 50%; border: 1px solid green;"> Yakiniku </li>
  <li style = "width: 50%; border: 1px solid green;"> Yakitori </li>
  <li style = "width: 50%; border: 1px solid green;"> salad </li>
  <li style = "width: 50%; border: 1px solid green;"> tea </li>
</ul>

Look at the 10px space on the left and right. Subtract 10px on each side from 100%width. To center the ul tag, set the left and right margins to automatic "margin-left: auto;" and "margin-right: auto;".

Set the margin between vertical elements

Next, let's set the margin between the vertical elements. "Margin-top: 5px;" "margin-bottom: 5px;". When arranging multiple lines in a flex layout, keep in mind that the margins do not overlap.

Yakiniku
Yakitori
Salad
Tea

<ul style = "display: flex; flex-wrap: wrap; width: calc (100%--10px --10px); margin-left: auto; margin-right: auto;">
  <li style = "width: 50%; border: 1px solid green; margin-top: 5px; margin-bottom: 5px;"> Yakiniku </li>
  <li style = "width: 50%; border: 1px solid green; margin-top: 5px; margin-bottom: 5px;"> Yakitori </li>
  <li style = "width: 50%; border: 1px solid green; margin-top: 5px; margin-bottom: 5px;"> Salad </li>
  <li style = "width: 50%; border: 1px solid green; margin-top: 5px; margin-bottom: 5px;"> Tea </li>
</ul>

Set the margin between elements

Let's set the margin between the elements. The first column has a 10px margin on the right side. Since the width of the columns has increased by 10px, the width of each column should be reduced by 5px.

Yakiniku
Yakitori
Salad
tea

<ul style = "display: flex; flex-wrap: wrap; width: calc (100%--10px --10px); margin-left: auto; margin-right: auto;">
  <li style = "width: calc (50%-5px); border: 1px solid green; margin-top: 5px; margin-bottom: 5px; margin-right: 10px;"> Yakiniku </li>
  <li style = "width: calc (50%-5px); border: 1px solid green; margin-top: 5px; margin-bottom: 5px;"> Yakitori </li>
  <li style = "width: calc (50%-5px); border: 1px solid green; margin-top: 5px; margin-bottom: 5px; margin-right: 10px;"> Salad </li>
  <li style = "width: calc (50%-5px); border: 1px solid green; margin-top: 5px; margin-bottom: 5px;"> tea </li>
</ul>

That's all there is to it.

Sample of arranging product cards at even intervals

This is a sample of arranging product cards at even intervals.

Arrange product cards in two rows at equal intervals

A two-row sample in which product cards are evenly spaced. You can write beautifully using nth-child. 2n + 1 is the odd li element.

Yakiniku
Yakitori
Salad
Tea

<style>
  .card_arrange_2column ul {
    display: flex;
    flex-wrap: wrap;
    width: calc (100%―― 10px ―― 10px);
    margin-left: auto;
    margin-right: auto;
  }
  .card_arrange_2column li {
    width: calc (50%-5px);
    border: 1px solid green;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .card_arrange_2column li: nth-child (2n + 1){
    margin-right: 10px;
  }
</style>

<div class = "card_arrange_2column">
  <ul>
    <li> Yakiniku </li>
    <li> Yakitori </li>
    <li> Salad </li>
    <li> Tea </li>
  </ul>
</div>

Arrange product cards in three rows at equal intervals

A sample of attendance in which product cards are arranged in three rows at equal intervals. You can write beautifully using nth-child. 3n + 1 is the li element in the first column and 3n + 2 is the element in the second column. Choose a multiple of 3px so that the interval is divisible. "33.4%" is set individually.

Yakiniku
Yakitori
Salad
Tea
potato
soup

<style>
  .card_arrange_3column ul {
    display: flex;
    flex-wrap: wrap;
    width: calc (100%―― 9px ―― 9px);
    margin-left: auto;
    margin-right: auto;
  }
  .card_arrange_3column li {
    width: calc (33.3%-6px);
    border: 1px solid green;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .card_arrange_3column li: nth-child (3n + 1) {
    margin-right: 9px;
  }
  .card_arrange_3column li: nth-child (3n + 2) {
    margin-right: 9px;
  }
</style>

<div class = "card_arrange_3column">
  <ul>
    <li> Yakiniku </li>
    <li> Yakitori </li>
    <li> Salad </li>
    <li> Tea </li>
    <li> potato </li>
    <li> soup </li>
  </ul>
</div>

HTML・CSS Writing 2022