Как это реализовать это в html?

Question

[Evan_Grace]

хочу что бы эти кружки были кликабельные, в них будут ссылки. каким образом их так расставить? и что бы при адаптиве на моб. экране они вставали в три колонки? как это реализовать? что во что влаживать.

вот мой код

<section id="content" class="content">
    <div class="container">
			<div class="row">
				<div class="col-lg-12">
          <div class="container">
					<ul class="im d-flex justify-content-center">
						<li class="im__item">
							<a href="#"></a>
						</li>
						<li class="a">
							<a href="#"></a>
						</li>
						<li class="a">
							<a href="#"></a>
						</li>
            <li class="a">
							<a href="#"></a>
						</li>
            <li class="a">
							<a href="#"></a>
						</li>
            <li class="a">
							<a href="#"></a>
						</li>
            <li class="a">
							<a href="#"></a>
						</li>
					</ul>
        </div>
        </div>

Answer 1

[Ankhena]

Как-то так https://jsfiddle.net/fek5pbt2/

Comments

[Evan_Grace]

Ankhena, , А в ли добавить тег а с сылкой можно уже, да? И img тоже, что бы за место цифер, были картинки? Картинкам задать max-width: 100%, что бы при уменьшении экрана, они подстраивались, или дать каждой класс и к классу добавить картинку через сss? Это будет коректно работать?

[Ankhena]

Evan_Grace, не поняла где в примере img?
Но вы можете добавлять что угодно.

[Evan_Grace]

Ankhena, он просто в css подклучал через class a
.a {
Background-image: url ();
}

[Ankhena]

Evan_Grace, плохо понятно кто он.
Если цветные кружки, то это фон, background-color, у li'шек

Answer 2

[xmoonlight]

Колонками делайте с вертикальным отступом через один (even/odd в css)

Answer 3

[Сергей Кутузов]

Я бы попробовал реализовать таблицей. В каждый второй td добавить атрибут style="padding: 0 0 10px 0". Ноль это на вскидку. Идея думаю понятна - приподнять содержимое ячейки к верхнему краю
Таблица довольно таки адаптивна.
Для мобил, при определённом размере экрана добавить медиазапрос по размеру и этой таблице display:none;, а вместо неё таблицу на три колонки. Это один из вариантов.

Comments

[Ankhena]

жестоко

[Сергей Кутузов]

Что значит жёстко?
Вот таблица

Трудоёмко что-ли. Так нет.