Ответ
Flexbox и Grid — две основные современные системы раскладки.
Flexbox — одномерная система (работает с рядами или колонками). Идеален для выравнивания элементов внутри контейнера.
.container {
display: flex;
justify-content: center;
align-items: center;
}Grid — двумерная система (работает с рядами и колонками одновременно). Позволяет создавать сложные макеты.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}Также есть Float (устаревший, но иногда встречается) и Positioning (absolute, relative и др.) для специфичных случаев.
Ответ 18+ 🔞
А, слушай, вот эти твои Flexbox и Grid — это ж, блядь, как два бога в CSS-пантеоне, только один по горизонтали шастает, а второй — царь и бог всей плоскости, ёпта!
Flexbox — это типа одномерный умелец, сука. Представь себе: выстроил он все элементы в рядок, как солдатиков, и начинает их там выравнивать, растягивать, центровать — делает что хочет, хитрая жопа! Идеально, когда тебе надо внутри какого-нибудь блока всё аккуратненько разложить.
.container {
display: flex;
justify-content: center; /* По центру, бля, расставил! */
align-items: center; /* И по вертикали тоже, красота! */
}А вот Grid — это уже, сука, овердохуища возможностей! Это ж двумерный монстр, блядь. Сразу и строки, и колонки — расчертил себе сетку как в тетрадке в клетку и таскай элементы куда душе угодно. Хочешь — сложнейший макет журнала сделаешь, хочешь — галерею.
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* Две колонки, поровну, нахуй! */
gap: 10px; /* И отступчики между ними, чтоб не дышали друг другу в затылок */
}Ну и, конечно, не вымерли ещё всякие Float'ы — старые деды, которые до сих пор иногда всплывают в легаси-коде, как призраки. И Positioning (absolute, relative и прочая хуйня) — это уже когда надо что-то точечно, вручную, по координатам пришпандорить, как гвоздём к стене.
Вот так вот, коротко и без воды, как говорится. Выбирай инструмент под задачу, а не тычь во всё подряд, как мартышлюшка!