Как расположить блоки в одну линию?

Question

[fleshik]

Как расположить блоки в одну линию с расстоянием 10px между ними?

Comments

[twobomb]

Горизонтальную или вертикальную?

[fleshik]

twobomb, горизонтальную

Answer 1

[Тигран Абрамян]

https://jsfiddle.net/5v2jqtad/

Answer 2

[gorost]

https://jsfiddle.net/x2ay9586/

Answer 3

[Фин Дел]

Comments

[fleshik]

а какой из этих вариантов на данный момент считается самым правильным какой сейчас принято использовать FlexBox, Css Grid, Float, inline-block ?

[fleshik]

Michael McGlyyn, спасибо, а после основ css что лучше досконально изучить первым flexbox или css grid.

Answer 4

[Елена Валентайн]

Можно сделать ещё так:

.grid-cont {
  width: 100%;
  max-width: 992px;
  height: auto;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(5, 1fr);
  padding: 20px;
      
}

.grid-cont__item {
background: green;
width: 100%;
height: 200px;
}

@media (max-width: 992px) {
.grid-cont {
grid-template-columns: repeat(4, 1fr);
}
}

@media (max-width: 700px) {
.grid-cont {
grid-template-columns: repeat(3, 1fr);
}
}

@media (max-width: 600px) {
.grid-cont {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 599px) {
.grid-cont {
grid-template-columns: repeat(1, 1fr);
}
}

Можно контролировать сколько блоков будет на первой строке.

Answer 5

[vasMAran]

.bg,
.bg1 {
	display:inline-block;
	width:100px;
	margin-right:10px;
}
.bg1:last-child {
	margin:0;
}