Как можно располагать элементы в CSS

В CSS есть несколько способов расположения элементов:

1. Flexbox - одномерное выравнивание по строкам/колонкам:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. Grid - двумерная сетка:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

3. Позиционирование:

• static (по умолчанию)
• relative (относительно своего положения)
• absolute (относительно ближайшего позиционированного родителя)
• fixed (относительно viewport)
• sticky (гибрид relative и fixed)

4. Float (устаревший способ):

img {
  float: left;
  margin-right: 20px;
}

5. Многоколоночная верстка (column-* свойства)

Flexbox и Grid - современные и наиболее мощные методы. Позиционирование лучше использовать для точечных корректировок.