🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
С помощью grid-auto-columns и grid-auto-flow можно собрать адаптивные колонки, равномерно делящие доступное пространство:
.cols {
display: grid; /* Включаем гриды */
grid-auto-columns: minmax(100px, 1fr); /* Пусть неявные колонки равномерно делят свободное пространство, сохраняя минимальную ширину в 100 пк */
grid-auto-flow: column; /* Пусть невлезающие элементы выстраиваются в колонки */
gap: 18px; /* Задаём межколонник в 18 пк */
height: 100%; /* Растягиваем колонки по высоте */
}<div class="cols">
<div>Первая колонка</div>
…
<div>Четвёртая колонка</div>
</div>
<div class="cols">
<div>Первая колонка</div>
<div>Вторая колонка</div>
</div>
<div class="cols">
<div>Первая колонка</div>
…
<div>Пятая колонка</div>
</div>Адаптивные колонки на флексбоксах
С помощью grid-auto-columns и grid-auto-flow можно собрать адаптивные колонки, равномерно делящие доступное пространство:
.cols {
display: grid; /* Включаем гриды */
grid-auto-columns: minmax(100px, 1fr); /* Пусть неявные колонки равномерно делят свободное пространство, сохраняя минимальную ширину в 100 пк */
grid-auto-flow: column; /* Пусть невлезающие элементы выстраиваются в колонки */
gap: 18px; /* Задаём межколонник в 18 пк */
height: 100%; /* Растягиваем колонки по высоте */
}<div class="cols">
<div>Первая колонка</div>
…
<div>Четвёртая колонка</div>
</div>
<div class="cols">
<div>Первая колонка</div>
<div>Вторая колонка</div>
</div>
<div class="cols">
<div>Первая колонка</div>
…
<div>Пятая колонка</div>
</div>Адаптивные колонки на флексбоксах
Комбинацию grid-auto-columns с ключевыми словами min-content, max-content или fit-content используют для раскладки, в которой ширина и количество колонок зависит от содержимого. Например, при вёрстке горизонтального меню:
.menu {
display: grid;
grid-auto-flow: column; /* Автоматически раскладываем содержимое в колонки */
grid-auto-columns: max-content; /* Автоматически создаём колонки по количеству пунктов меню с шириной по их содержимому. Мы используем max-content, а не min-content, чтобы пункты меню из нескольких слов всегда оставались в одну строку */
column-gap: 20px; /* Задаём межколонник в 20 пк */
}В случае с текстом min‑content — это «займи так мало места, чтобы самое длинное слово вместилось», а max‑content — это «займи так много места, чтобы текст не пришлось переносить».
Комбинацию grid-auto-columns с ключевыми словами min-content, max-content или fit-content используют для раскладки, в которой ширина и количество колонок зависит от содержимого. Например, при вёрстке горизонтального меню:
.menu {
display: grid;
grid-auto-flow: column; /* Автоматически раскладываем содержимое в колонки */
grid-auto-columns: max-content; /* Автоматически создаём колонки по количеству пунктов меню с шириной по их содержимому. Мы используем max-content, а не min-content, чтобы пункты меню из нескольких слов всегда оставались в одну строку */
column-gap: 20px; /* Задаём межколонник в 20 пк */
}В случае с текстом min‑content — это «займи так мало места, чтобы самое длинное слово вместилось», а max‑content — это «займи так много места, чтобы текст не пришлось переносить».
По умолчанию элементы в грид‑контейнере последовательно заполняют его ячейкой за ячейкой, двигаясь слева‑направо и сверху‑вниз. Чтобы растянуть элемент на несколько ячеек, используют grid-column и grid-row. С помощью них мы указываем начальную и конечную направляющие, соответственно, всё пространство между ними отдаётся элементу:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Три колонки, равномерно делящие пространство */
grid-template-rows: repeat(5, minmax(75px, auto)); /* Пять строк с минимальной высотой в 75 пк */
gap: 20px;
}
.one {
grid-column: 1 / 3; /* Займи колонки от первой до третьей направляющей */
grid-row: 1; /* Встань в первый ряд */
}
.two {
grid-column: 2 / span 2; /* Займи две колонки, начиная со второй направляющей */
grid-row: 1 / span 2; /* Займи два ряда, начиная со второй направляющей */
}
.three {
grid-column: 1; /* Встань в первую колонку */
grid-row: 2 / 5; /* Займи строки от второй до пятой направляющей */
}
.four {
grid-column: 3;
grid-row: 3 / span 2;
}
.five {
grid-column: 2;
grid-row: 4 / span 2;
}
.six {
grid-column: 1;
grid-row: 5;
}
По умолчанию элементы в грид‑контейнере последовательно заполняют его ячейкой за ячейкой, двигаясь слева‑направо и сверху‑вниз. Чтобы растянуть элемент на несколько ячеек, используют grid-column и grid-row. С помощью них мы указываем начальную и конечную направляющие, соответственно, всё пространство между ними отдаётся элементу:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Три колонки, равномерно делящие пространство */
grid-template-rows: repeat(5, minmax(75px, auto)); /* Пять строк с минимальной высотой в 75 пк */
gap: 20px;
}
.one {
grid-column: 1 / 3; /* Займи колонки от первой до третьей направляющей */
grid-row: 1; /* Встань в первый ряд */
}
.two {
grid-column: 2 / span 2; /* Займи две колонки, начиная со второй направляющей */
grid-row: 1 / span 2; /* Займи два ряда, начиная со второй направляющей */
}
.three {
grid-column: 1; /* Встань в первую колонку */
grid-row: 2 / 5; /* Займи строки от второй до пятой направляющей */
}
.four {
grid-column: 3;
grid-row: 3 / span 2;
}
.five {
grid-column: 2;
grid-row: 4 / span 2;
}
.six {
grid-column: 1;
grid-row: 5;
}
Если в качестве значений grid‑column или grid‑row задать auto, браузер сам решит, что делать с элементом и его позицией: элементы разместятся в том же порядке, что и в коде, занимая по одной ячейке. Но если использовать auto / span N, то элемент займёт N колонок или строк, начиная с текущего места. Так можно получить «плиточную вёрстку», в которой порядок и размеры элементов определяются их разметкой. Например, как на промостраницах Эпла.
Чтобы сверстать похожие этажи, включим гриды, зададим направляющие и введём четыре вариации плиток:
.grid {
display: grid; /* Включаем раскладку гридами */
grid-template-columns: 1.85fr 1fr 1.85fr; /* Задаём резиновые направляющие для колонок: первая и третья в 1,85 раза больше центральной */
grid-auto-rows: 320px; /* Задаём автоматические направляющие для строк: каждые 320 пикселей */
gap: 20px; /* Задаём межстрочник и межколонник в 20 пк */
background: #161617;
}
.tile {
padding: 15px;
border-radius: 15px;
background: #000;
color: #ffb6ff;
}
/* «Плитка» на одну ячейку */
.tile-1-cols-1-rows {
grid-column: auto / span 1;
grid-row: auto / span 1;
}
/* Плитка на одну колонку и две строки */
.tile-1-cols-2-rows {
grid-column: auto / span 1;
grid-row: auto / span 2;
}
/* Плитка на две колонки и одну строку */
.tile-2-cols-1-rows {
grid-column: auto / span 2;
grid-row: auto / span 1;
}
/* Плитка на 2 колонки и 2 строки */
.tile-2-cols-2-rows {
grid-column: auto / span 2;
grid-row: auto / span 2;
}<div class="grid">
<div class="tile tile-2-cols-2-rows">
<h2>Meet Dynamic Island</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<h2>48MP Main camera</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<h2>The mastermind behind it all</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<p>A battery that’s all in, all day.</p>
</div>
<div class="tile tile-2-cols-1-rows">
<p>Film like a Pro.</p>
</div>
<div class="tile tile-1-cols-2-rows">
<p>Shaky shots, stable video</p>
</div>
<div class="tile tile-2-cols-2-rows">
<h2>Always-On display</h2>
</div>
<div class="tile tile-2-cols-2-rows">
<h2>Tougher than any smartphone glass</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<h2>Water resistance</h2>
</div>
<div class="tile tile-1-cols-2-rows">
<h2>Emergency SOS via satellite</h2>
</div>
<div class="tile tile-2-cols-1-rows">
<p>A camera in a class by itselfie.</p>
</div>
</div>Если в качестве значений grid‑column или grid‑row задать auto, браузер сам решит, что делать с элементом и его позицией: элементы разместятся в том же порядке, что и в коде, занимая по одной ячейке. Но если использовать auto / span N, то элемент займёт N колонок или строк, начиная с текущего места. Так можно получить «плиточную вёрстку», в которой порядок и размеры элементов определяются их разметкой. Например, как на промостраницах Эпла.
Чтобы сверстать похожие этажи, включим гриды, зададим направляющие и введём четыре вариации плиток:
.grid {
display: grid; /* Включаем раскладку гридами */
grid-template-columns: 1.85fr 1fr 1.85fr; /* Задаём резиновые направляющие для колонок: первая и третья в 1,85 раза больше центральной */
grid-auto-rows: 320px; /* Задаём автоматические направляющие для строк: каждые 320 пикселей */
gap: 20px; /* Задаём межстрочник и межколонник в 20 пк */
background: #161617;
}
.tile {
padding: 15px;
border-radius: 15px;
background: #000;
color: #ffb6ff;
}
/* «Плитка» на одну ячейку */
.tile-1-cols-1-rows {
grid-column: auto / span 1;
grid-row: auto / span 1;
}
/* Плитка на одну колонку и две строки */
.tile-1-cols-2-rows {
grid-column: auto / span 1;
grid-row: auto / span 2;
}
/* Плитка на две колонки и одну строку */
.tile-2-cols-1-rows {
grid-column: auto / span 2;
grid-row: auto / span 1;
}
/* Плитка на 2 колонки и 2 строки */
.tile-2-cols-2-rows {
grid-column: auto / span 2;
grid-row: auto / span 2;
}<div class="grid">
<div class="tile tile-2-cols-2-rows">
<h2>Meet Dynamic Island</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<h2>48MP Main camera</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<h2>The mastermind behind it all</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<p>A battery that’s all in, all day.</p>
</div>
<div class="tile tile-2-cols-1-rows">
<p>Film like a Pro.</p>
</div>
<div class="tile tile-1-cols-2-rows">
<p>Shaky shots, stable video</p>
</div>
<div class="tile tile-2-cols-2-rows">
<h2>Always-On display</h2>
</div>
<div class="tile tile-2-cols-2-rows">
<h2>Tougher than any smartphone glass</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<h2>Water resistance</h2>
</div>
<div class="tile tile-1-cols-2-rows">
<h2>Emergency SOS via satellite</h2>
</div>
<div class="tile tile-2-cols-1-rows">
<p>A camera in a class by itselfie.</p>
</div>
</div>justify‑items: stretch, по умолчанию
justify‑items: center
justify‑items: start
justify‑items: end
Выравнивание
Чтобы выровнять грид‑элементы внутри ячеек, используем justify-items у грид‑контейнера. По умолчанию элементы растягиваются на всю ячейку, но можно прижать их к началу, концу или центру ячейки.
Похожее свойство во флексбоксах называлось justify-content, но у justify-items свои варианты значений, и оно не зависит от оси раскладки — всегда выравнивает элементы по горизонтали.
justify‑content во флексбоксах
Выравнивание
Чтобы выровнять грид‑элементы внутри ячеек, используем justify-items у грид‑контейнера. По умолчанию элементы растягиваются на всю ячейку, но можно прижать их к началу, концу или центру ячейки.
Похожее свойство во флексбоксах называлось justify-content, но у justify-items свои варианты значений, и оно не зависит от оси раскладки — всегда выравнивает элементы по горизонтали.
justify‑content во флексбоксах