How do you use HTML li tags to make a four-column product list?

Use list items for products and CSS Grid for four columns

A product gallery can be a <ul> with one <li> per product. The list describes the repeated items; CSS decides how many columns appear. MDN documents the li element and CSS Grid layout.

HTML

<ul class="product-list">
  <li class="product-card">
    <a href="/product/1001">
      <img src="images/product-1.jpg"
           width="320" height="240"
           alt="Blue cotton shirt">
      <span class="name">Blue cotton shirt</span>
      <span class="price">$29.00</span>
    </a>
  </li>
  <li class="product-card">...</li>
  <li class="product-card">...</li>
  <li class="product-card">...</li>
</ul>

CSS

.product-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.product-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.product-card a:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 4px;
}
.product-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.name, .price { display: block; margin-top: 8px; }
@media (max-width: 800px) {
  .product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .product-list { grid-template-columns: 1fr; }
}

The product name, image, and price above are only teaching data. Replace them with real product information. Give product images their real intrinsic width and height, then let CSS scale them with width: 100% and height: auto.

Do not remove the focus outline from product links. Keyboard users need a visible focus state, so the example uses :focus-visible instead of hiding outlines.