Вопрос сетки: почему элементы <ul> <li> отображаются в столбце 2 друг под другом? Я хочу, чтобы они были рядом друг с др ⇐ CSS

[Anonymous]

Вопрос, касающийся CSS-сетки: я хотел бы, чтобы «Фотоматик», «Сведения о продукте», «О нас» и «Следуйте за нами» отображались в одной строке, каждый в своем столбце, но под каждым из них отображались сведения о продукте, «О нас» и «Следуйте за нами». другое в столбце номер 2.
HTML

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

   

[url=index.html]Fotomatic[/url]

[list]
[*][url=#]Product detail[/url]
[*][url=#]About us[/url]
[*][url=https://www.instagram.com/]Follow us 
[img]./resources/images/instagram.png[/img]
[/url]
[/list]


[list]
[*][url=#]
[img]./resources/images/ic-logo.svg[/img]
[/url]
[*][url=#]
[img]./resources/images/ic-product-detail.svg[/img]
[/url]
[*][url=#]
[img]./resources/images/ic-about-us.svg[/img]
[/url]
[*][url=#]Join us[/url]
[/list]

CSS

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

.hcontent {
display: grid;
width: 100%;
height: 200px;
grid-template-rows: 1fr;
grid-template-columns: 70% 10% 10% 10%;
}

.fotomatic {
grid-column: 1 / 2;
}

.product {
grid-column: 2 / 3;
}

.about {
grid-column: 3 / 4;
}

.follow {
grid-column: 4 / 5;
}

.mobile {
display: none;
}

.icon {
width: 20px;
}

@media (max-width: 480px) {
.desktop {
display: none;
}

.mobile {
display: block;
}
}

Я пробовал много вещей, но не могу понять. Отображаются ли элементы в одном столбце, потому что они находятся под ? Я неправильно смотрю на отношения Родитель/Ребенок?

Подробнее здесь: https://stackoverflow.com/questions/765 ... -each-othe