Одним из способов достижения этого эффекта является использование CSS Сетка .
С самого начала (и это нормально, когда вы хотите переформатировать список), это хорошо Идея начать с применения следующих стилей к родителю <ul>
/ <ol>
:
margin-left: 0
padding-left: 0
list-style-type: none
Это действует как базовый c сброс к способу отображения любого из этих типов списков.
Рабочий пример:
.list {
display: grid;
grid-template-columns: 180px 180px;
width: 360px;
margin-left: 0;
padding-left: 0;
border: 1px solid rgb(0, 0, 0);
list-style-type: none;
}
.list li {
width: 180px;
border: 1px solid rgb(0, 0, 0);
box-sizing: border-box;
}
.list li span {
display: block;
padding: 6px 9px;
border: 1px solid rgb(0, 0, 0);
}
.list li span.category {
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
<ul class="list">
<li>
<span class="category">Category 1</span>
<span class="name">Item Title 1</span>
<span class="price">40 EUR</span>
<span class="url"><a href="url1">Link to Article</a></span>
</li>
<li>
<span class="category">Category 2</span>
<span class="name">Item Title 2</span>
<span class="price">55 EUR</span>
<span class="url"><a href="url2">Link to Article</a></span>
</li>
</ul>