CSS Layout cookbook

Книга рецептов CSS объединяет примеры большинства наиболее распространённых лейаут паттернов, которые могу встретиться вам при разработке веб-сайтов.

В дополнение к представленным примерам кода, - которые вы вполне можете использовать в качестве отправной точки для своих проектов, - эти рецепты иллюстрируют нестандартные способы применения существующих лейаут (layout) спецификаций. Паттерны, представленные ниже, должны помочь вам увидеть новые варианты решения проблем, встречающихся в жизни разработчика. Примечание. Если вы новичок в в работе с CSS, то сначала вы можете взглянуть на наш модуль обучения макетам CSS, так как он даст вам базовые знания, необходимые для использования приведённых здесь рецептов.

The Recipes

Recipe Description Layout Methods
Media Objects (en-US) A two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet. CSS Grid, float fallback, fit-content (en-US) sizing
Columns (en-US) When to choose multi-column layout, flexbox or grid for your columns CSS Grid, Multicol (en-US), Flexbox
Center an element (en-US) How to center an item horizontally and vertically Flexbox, Box Alignment
Sticky footers Creating a footer which sits at the bottom of the container or viewport when the content is shorter. CSS Grid, Flexbox
Split Navigation A navigation pattern where some links are visually separated from the others. Flexbox, margin
Breadcrumb Navigation Creating a list of links to allow the visitor to navigate back up through the page hierarchy. Flexbox

Contribute a Recipe

As with all of MDN we would love you to contribute a recipe in the same format as the ones shown above. See this page for a template and guidelines for writing your own example.