Собираем сайт-портфолио для фотографа
Прокачиваем навыки CSS: GRID Создаём CSS-сетку нужного размера Верстаем в сетке

Пере­хо­дим от тео­рии к прак­ти­ке — соби­ра­ем свой пер­вый сайт-портфолио на сет­ке CSS Grid.

Если вы здесь, но не зна­е­те, что такое сет­ка и как с ней рабо­тать, почи­тай­те преды­ду­щие выпуски:

Легенда

Допу­стим, к нам обра­тил­ся заказ­чик — это фото­граф, кото­ро­му нуж­но порт­фо­лио. После обще­ния мы выяс­ни­ли его тре­бо­ва­ния к сайту:

  • свер­ху долж­ны идти его имя и кон­так­ты, про­сто в строчку;
  • ниже — узкая поло­са на всю шири­ну маке­та с одной фотографией;
  • под ней — назва­ние раз­де­ла: «При­ро­да»;
  • ещё ниже идут фото­гра­фии, запол­няя всю шири­ну маке­та. Какие-то фото­гра­фии боль­ше, какие-то меньше;
  • в буду­щем под ним мы доба­вим раз­дел «Тех­ни­ка», где всё повто­ря­ет­ся (фото пока не гото­вы, сей­час не делаем).

Дого­во­ри­лись о том, что всё это сде­ла­ем в пер­вой ите­ра­ции, а во вто­рой доба­вим про­смотр пол­но­раз­мер­ных фото по кли­ку и фор­му обрат­ной связи.

Подготовка

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

Шаблон страницы с сеткой

<!DOCTYPE html>
<html>

<head>
  <title>Grid</title>
  <style>

    body{
      /*настраиваем шрифт*/
      font-family: Arial, Helvetica, sans-serif;
    }

    /*общие настройки сетки*/
    .grid {
      /*подключаем сетку*/
      display: grid;
    } 

    /*внешний вид ячеек*/
    .grid > * {
      /*скругление углов*/
      border-radius: 5px;
      /*расстояние от одной границы ячейки до другой*/
      margin: 1px;
    }

  </style>
</head>

<body>
  <!-- создаём контейнер, который будет отвечать за нашу сетку -->
  <div class="grid">
   </div>
</body>
</html>

Мы уже выяс­ни­ли зара­нее коли­че­ство фото­гра­фий, кото­рое нуж­но пока­зать в порт­фо­лио, и поня­ли, что нам нуж­на сет­ка из 20 строк и 5 колонок:

/*формируем строки и столбцы*/

grid-template-rows: 50px repeat(20, 250px);

grid-template-columns: repeat(5, 250px);

Пер­вое зна­че­ние 50 пик­се­лей в стро­ках нам нуж­но для шап­ки сай­та — там будут имя и кон­так­ты фотографа.

Так как на стра­ни­це будут боль­шие фото­гра­фии, кото­рые будут зани­мать несколь­ко яче­ек, уста­но­вим параметр:

grid-auto-flow: dense;

Он отве­ча­ет за плот­ную уклад­ку содер­жи­мо­го в сет­ке — если нуж­но, пере­дви­нет сосед­ние ячей­ки в дру­гое место, что­бы не было дыр в макете.

Имя и контакты

В этом раз­де­ле нам нуж­но напи­сать имя и фами­лию фото­гра­фа и поста­вить три ссыл­ки для свя­зи — почту, теле­грам и инста­грам. Имя с фами­ли­ей поста­вим в пер­вых двух ячей­ках этой стро­ки, а осталь­ные ссыл­ки — в оставшихся.

Сде­ла­ем отдель­ные обла­сти для каж­до­го эле­мен­та шапки:

.name {
  grid-row-start: 1; 
  grid-row-end: 2; 
  grid-column-start: 1;   
  grid-column-end: 3; 
  font-size: 34px;
  font-weight: 900;

}

.email {
  grid-row-start: 1; 
  grid-row-end: 2; 
  grid-column-start: 3;   
  grid-column-end: 4; 
}

.tg {
  grid-row-start: 1; 
  grid-row-end: 2; 
  grid-column-start: 4;   
  grid-column-end: 5; 
}

 .inst {
  grid-row-start: 1; 
  grid-row-end: 2; 
  grid-column-start: 5;   
  grid-column-end: 6; 
}

По умол­ча­нию текст внут­ри бло­ка <div> при­жи­ма­ет­ся к верх­не­му краю. Что­бы опу­стить текст вниз, доба­вим в послед­ние три обла­сти коман­ды, кото­рые зада­дут отдель­ные пра­ви­ла для содер­жи­мо­го этих ячеек:

display: flex;

align-items: flex-end;

padding-bottom: 8px;

Добав­ля­ем HTML-код в страницу:

<div class="name">Михаил Максимов</div>
<div class="email"><a href="mailto:mikhail.maximov@ya.ru">mikhail.maximov@ya.ru</a></div>
<div class="tg"><a href="https://t.me/thecodemedia">Телеграм</a></div>
<div class="inst"><a href="https://www.instagram.com/thecodemedia/">Инстаграм</a></div>

Длинная картинка на всю ширину

Что­бы отде­лить шап­ку от основ­но­го кон­тен­та, сде­ла­ем новую область:

.upper {

      grid-row-start: 2; 

      grid-row-end: 3; 

      grid-column-start: 1;   

      grid-column-end: 6;

    }

Сра­зу же про­пи­шем сти­ли для кар­ти­нок, что­бы они сами мас­шта­би­ро­ва­лись под раз­мер обла­сти, — возь­мём стиль из ста­тьи про рабо­ту с ячейками:

img{

  border-radius: 5px;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

Доба­вим новый блок в сет­ку и посмот­рим на результат:

<div class="upper"> <img src="https://images.unsplash.com/photo-1566047973053-6678927ced4c?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8Nnx8bmF0dXJlfGVufDB8MnwwfA%3D%3D&auto=format&fit=crop&w=600&q=60"></div>

Заголовок раздела

Сде­ла­ем так: выде­лим под заго­ло­вок тоже целую стро­ку, сде­ла­ем шрифт покруп­нее и поста­вим над­пись в центре:

.zag-1 {
  grid-row-start: 3; 
  grid-row-end: 4; 
  grid-column-start: 1;   
  grid-column-end: 6;
  text-align: center;
  display: flex ; 
  justify-content: center;
  align-items: center;
  font-size: 80px;
}

Мы доба­ви­ли сюда три допол­ни­тель­ные команды:

  • display:flex поз­во­ля­ет нам гиб­ко управ­лять содер­жи­мым блока;
  • justify-content: center — ста­вит наш текст по цен­тру шири­ны макета;
  • align-items: center — ста­вит содер­жи­мое бло­ка в центр по вертикали.

Добав­ля­ем HTML-код и смот­рим результат:

Расставляем фото по сетке

Запол­ним сет­ку фото­гра­фи­я­ми так:

  • на стар­те будет боль­шая фото­гра­фия 3 × 4 ячейки;
  • где-то в сере­дине раз­ме­стим одно фото 2 × 3 и два фото 1 × 2 ячейки;
  • осталь­ные фото­гра­фии — каж­дая в сво­ей ячейке.

Зада­дим обла­сти для боль­ших фото­гра­фий и сра­зу выбе­рем для них место в макете:

 .img34{
      grid-row-start: 4; 
      grid-row-end: 7; 
      grid-column-start: 1;   
      grid-column-end: 5;
    }

    .img23{
      grid-row-start: 10; 
      grid-row-end: 12; 
      grid-column-start: 1;   
      grid-column-end: 4;
    }

    .img12-1{
      grid-row-start: 7; 
      grid-row-end: 8; 
      grid-column-start: 2;   
      grid-column-end: 4;
    }

    .img12-2{
      grid-row-start: 9; 
      grid-row-end: 10; 
      grid-column-start: 4;   
      grid-column-end: 6;
    }

При­ме­ним эти клас­сы к пер­вым четы­рём бло­кам с изоб­ра­же­ни­я­ми, а осталь­ные фото­гра­фии про­сто поме­стим в div-блоки:

Div-блоки с изображениями

<div class="img34"><img src="https://images.unsplash.com/photo-1588650944142-c9160fd45802?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTV8fG5hdHVyZXxlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div class="img23"><img src="https://images.unsplash.com/photo-1559150842-1b402cfd3931?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjN8fG5hdHVyZXxlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div class="img12-1"><img src="https://images.unsplash.com/photo-1568429838920-de3a3aa8cf1c?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjV8fG5hdHVyZXxlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div class="img12-2"><img src="https://images.unsplash.com/photo-1574758505490-717eb3ad97f5?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mjh8fG5hdHVyZXxlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
  
  <div><img src="https://images.unsplash.com/photo-1580834195694-0e333ca41f3d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MzB8fG5hdHVyZXxlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div><img src="https://images.unsplash.com/photo-1559244673-9cee88d551f6?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MzN8fG5hdHVyZXxlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div><img src="https://images.unsplash.com/photo-1584470457230-0fc019eb4ff6?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MzV8fG5hdHVyZXxlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div><img src="https://images.unsplash.com/photo-1529300546587-05b516fc461f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzl8fG5hdHVyZXxlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div><img src="https://images.unsplash.com/photo-1560649558-10d69907f96b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8OTV8fG5hdHVyZXxlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div><img src="https://images.unsplash.com/photo-1562059392-096320bccc7e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8ODl8fG5hdHVyZXxlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div><img src="https://images.unsplash.com/photo-1578953600642-0b88f8aeb66a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8ODV8fG5hdHVyZXxlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div><img src="https://images.unsplash.com/photo-1573616420487-df5d87ba9594?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8ODN8fG5hdHVyZXxlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div><img src="https://images.unsplash.com/photo-1570327920356-9d2cdf21020f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8NzZ8fG5hdHVyZXxlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div><img src="https://images.unsplash.com/photo-1564256939897-e28e64d51642?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8NzJ8fG5hdHVyZXxlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div><img src="https://images.unsplash.com/photo-1565651454302-e263192bad3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8NjZ8fG5hdHVyZXxlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div><img src="https://images.unsplash.com/photo-1561810239-137bbfbecb2d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8NjF8fG5hdHVyZXxlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div><img src="https://images.unsplash.com/photo-1559626627-cb31b201e27f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8NTh8fG5hdHVyZXxlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div><img src="https://images.unsplash.com/photo-1559140508-eef7299ddb96?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8NTd8fG5hdHVyZXxlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div><img src="https://images.unsplash.com/photo-1576704972320-a094db203211?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8NTJ8fG5hdHVyZXxlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div><img src="https://images.unsplash.com/photo-1581701545134-c627459217a7?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8NDh8fG5hdHVyZXxlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div><img src="https://images.unsplash.com/photo-1562796472-065ac45f2e80?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8NDR8fG5hdHVyZXxlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div><img src="https://images.unsplash.com/flagged/photo-1564292284432-2950d95f1892?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fG5hdHVyZXxlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>

Что дальше

У нас полу­чил­ся сайт-портфолио для фото­гра­фа, но здесь мно­го ещё над чем нуж­но работать:

  • поме­нять места­ми неко­то­рые фото, что­бы они соче­та­лись друг с дру­гом по цветам;
  • сде­лать их кли­ка­бель­ны­ми — уве­ли­чи­вать и умень­шать фото по клику;
  • сде­лать фор­му обрат­ной свя­зи без пере­за­груз­ки стра­ни­цы, что­бы фото­граф мог пере­зво­нить заказчику;
  • сде­лать сайт адап­тив­ным, что­бы он хоро­шо смот­рел­ся на любых экранах.

Мы это сде­ла­ем, но не всё сра­зу. Под­пи­ши­тесь, что­бы не про­пу­стить вто­рую часть.

Текст, иллю­стра­ции и редак­ту­ра:
Миха­ил Полянин
Редак­тор:
Мак­сим Ильяхов
Облож­ка:
Даня Бер­ков­ский
Вёрст­ка:
Мария Дро­но­ва
Кор­рек­тор:
Ири­на Михеева
Соц­се­ти:
Олег Веш­кур­цев

Во имя кра­со­ты и дизайна.