Попытка создать HTML-CSS-сетку для веб-сайта. ⇐ CSS

[Anonymous]

Я создаю веб-сайт для юридической фирмы и пытаюсь реализовать сетку CSS, как показано на изображении ниже.
У меня возникли проблемы с добавлением значков и полей в каждую сетку. а также.

Код: Выделить всё

.grid-column {
float: left;
width: 31%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
margin: 10px;
font-family: Arial, Helvetica, sans-serif;
}

/* Clear floats after the columns */
.grid-row:after {
content: "";
display: table;
clear: both;
}

/* Wrap text within columns */
.grid-column h2, .grid-column p {
max-width: 80%; /* Adjust as needed */
white-space: wrap;
}

Код: Выделить всё

Corporate & Security
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis

Medical & Health Care
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis

Pensions & Benefits Law
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis




Home Credit Law
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis

Life Insurance Law
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis

E-Commerce Law
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis

Вот что я пытаюсь воспроизвести:



Подробнее здесь: https://stackoverflow.com/questions/785 ... -a-website