Что такое layout

О, макет, говоришь? Ну это ж святое, основа основ, как фундамент у дома, только если фундамент постоянно плывёт, ебушки-воробушки! Сейчас разжую, как для младенца.

Смотри, вся эта кухня верстки крутится вокруг одной простой мысли: как разложить эти гребаные квадратики с текстом и картинками по экрану, чтобы не было пиздеца. И есть для этого несколько проверенных способов, прям как инструменты в ящике: гвоздь, шуруп и болт с гайкой, ёпта.

1. Блочная модель, она же священная коробка. Вот представь: каждый элемент на странице — это такая коробка, блядь. Внутри — контент (само мясо). Потом идёт padding — это как мягкая прокладка, отступ от мяса до стенок коробки. Потом сама стенка — border. А вокруг стенки — margin, это чтобы коробки друг от друга не прилипали, как голые мужики в бане. Вот эту всю хуйню и считают, когда говорят «ширина 200px». А если поставить box-sizing: border-box;, то магия — ширина 200px будет включать в себя и стенки, и прокладку! Удобно, пиздец как. Без этого можно с ума сойти, высчитывая.

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

.container {
  display: flex;
  justify-content: center; /* по горизонтали их как? По центру, нахуй! */
  align-items: center; /* по вертикали тоже в серединку */
}

Вот и всё, элементы внутри .container сразу становятся послушными, как шестёрки. Хочешь — растягивай, хочешь — сжимай, хочешь — порядок меняй. Проще пареной репы, ей-богу.

3. Грид, он же божественная сетка. А это уже для сложных макетов, где надо и по горизонтали, и по вертикали всё чётко, как на шахматной доске. Двумерная магия, блядь. Задаёшь колонки и строки — и вперёд.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Две колонки, поровну, на всю доступную хуйню (fr) */
}

Сетка — это овердохуища по мощности. Можно творить вообще что угодно, прям как Леонардо да Винчи, только в CSS.

4. Позиционирование — когда надо вырвать элемент из общего потока. Вот есть relative — сдвинул чуть-чуть от того места, где он стоял. absolute — вырвал нахуй из потока и прибил гвоздями к ближайшему «относительному» родителю. fixed — приклеил к окну браузера, хоть скроль на тысячу пикселей вниз. sticky — хитрая жопа: пока скролишь, он как обычный, а как достиг определённого места — прилипает и дальше едет с тобой. Красота!

А теперь подводные ебучки, на которых все обламываются:

• Тот самый box-sizing, про который я говорил. Забыл поставить border-box — и поехали все размеры к чёртовой матери, контейнеры вылазят за пределы.
• Overflow — что делать, если контента больше, чем влезло в коробку? Обрезать (hidden), скролл добавить (scroll) или пусть торчит, как хуй из штанов (visible)? Решай.
• Адаптивность, мать её. Без неё сейчас никуда. Пишешь медиазапросы (@media), и для разных ширин экрана (телефон, планшет, монитор) задаёшь разные стили. Типа «на экране уже 768px — делай колонки не две, а одну, а то пользователь будет скролить горизонтально, как мудак».

Вот, собственно, и вся магия. Сначала кажется, что пиздец какой сложный пазл, а потом врубаешься — и просто берёшь нужный инструмент и ебешь им верстку, пока она не станет послушной. Главное — практиковаться, а не просто читать, как я тут распинаюсь.