Как создать: Галерея портфолио

Учимся создавать адаптивную сетку галереи портфолио с помощью CSS.

Галерея портфолио

Учимся создавать адаптивную галерею портфолио, которая изменяется между 4, 2 столбцами и полной шириной в зависимости от ширины экрана:

попробуйте сами

Как создать сайт портфолио

Шаг 1 - Добавьте HTML:

<!-- Основное содержимое (центрированный сайт) -->
<div class="main">
<h1>MYLOGO.COM</h1>
<hr>
<h2>Портфолио</h2>
<p>Измените размер окна браузера, чтобы увидеть эффект адаптивности.</p>
<!-- 作品集画廊网格 -->
<div class="row">
  <div class="column">
    <div class="content">
      <img src="beijing.jpg" alt="Beijing" style="width:100%">
      <h3>Моя работа</h3>
      <p>Lorem ipsum..</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="hangzhou.jpg" alt="Hangzhou" style="width:100%">
      <h3>Моя работа</h3>
      <p>Lorem ipsum..</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="chongqing.jpg" alt="Chongqing" style="ширина:100%">
      <h3>Моя работа</h3>
      <p>Lorem ipsum..</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="shenzhen.jpg" alt="Shenzhen" style="ширина:100%">
      <h3>Моя работа</h3>
      <p>Lorem ipsum..</p>
    </div>
  </div>
</div>
<div class="content">
  <img src="bear.jpg" alt="Bear" style="ширина:100%">
  <h3>Другие работы</h3>
  <p>Lorem ipsum..</p>
</div>
<!-- Конец основного содержимого -->
</div>

второй шаг - добавьте CSS:

* {
  box-sizing: border-box;
}
тело {
  цвет фона: #f1f1f1;
  отступ: 20px;
  семейство шрифтов: Arial;
}
/* Центрируйте сайт */
.main {
  макс-ширина: 1000px;
  отступ: auto;
}
h1 {
  размер шрифта: 50px;
  разбивка слов: break-all;
}
.row {
  отступ: 8px -16px;
}
/* Добавьте внутренний отступ между столбцами (если необходимо) */
.row,
.row > .column {
  отступ: 8px;
}
/* Создайте четыре параллельных столбца одинаковой ширины. */
.column {
  float: left;
  ширина: 25%;
}
/* Убедитесь, что после строки нет浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Контент */
.content {
  цвет фона: белый;
  отступ: 10px;
}
/* Респонсивный макет - создайте двухстолбцовый макет вместо четырехстолбцового */
@media screen and (макс-ширина: 900px) {
  .column {
    ширина: 50%;
  }
}
/* Респонсивный макет - сделайте два столбца堆ированными, а не параллельными */
@media screen and (макс-ширина: 600px) {
  .column {
    ширина: 100%;
  }
}

попробуйте сами

Соответствующие страницы

Урок:Как создать галерею с функцией фильтрации