├── .gitignore
├── css
    └── styles.css
├── images
    ├── pexels-1.jpg
    ├── pexels-2.jpg
    ├── pexels-3.jpg
    ├── pexels-4.jpg
    ├── pexels-5.jpg
    └── pexels-6.jpg
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store


--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --page-bg-color: #f9f9fd;
 3 |   --primary-text-color: #212121;
 4 |   --card-set-gap: 20px;
 5 |   --card-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
 6 |     0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
 7 | }
 8 | 
 9 | body {
10 |   background-color: var(--page-bg-color);
11 |   color: var(--primary-text-color);
12 |   line-height: 1.5;
13 | }
14 | 
15 | h1,
16 | h2,
17 | h3,
18 | h4,
19 | h5,
20 | h6,
21 | p {
22 |   margin: 0;
23 | }
24 | 
25 | img {
26 |   display: block;
27 |   max-width: 100%;
28 |   height: auto;
29 | }
30 | 
31 | /* PAGE */
32 | .page-title {
33 |   font-size: 32px;
34 |   margin-bottom: 30px;
35 | }
36 | 
37 | /* CONTAINER */
38 | .container {
39 |   width: 1170px;
40 |   padding-left: 15px;
41 |   padding-right: 15px;
42 | 
43 |   margin-left: auto;
44 |   margin-right: auto;
45 | }
46 | 
47 | /* CARD SET */
48 | .card-set {
49 |   padding: 0;
50 |   margin: 0;
51 |   list-style: none;
52 | 
53 |   display: flex;
54 |   flex-wrap: wrap;
55 |   margin-left: calc(-1 * var(--card-set-gap));
56 |   margin-top: calc(-1 * var(--card-set-gap));
57 | }
58 | 
59 | .card-set > .item {
60 |   flex-basis: calc(100% / 3 - var(--card-set-gap));
61 |   margin-left: var(--card-set-gap);
62 |   margin-top: var(--card-set-gap);
63 | }
64 | 
65 | /* CARD */
66 | .card {
67 |   box-shadow: var(--card-shadow);
68 |   border-radius: 4px;
69 |   overflow: hidden;
70 | }
71 | 
72 | .card-content {
73 |   padding: 15px;
74 | }
75 | 
76 | .card-text {
77 |   margin-top: 10px;
78 | }
79 | 


--------------------------------------------------------------------------------
/images/pexels-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/flex-grid-tutorial/aa4ed53f34aa84b2d278ebc350dbe9a6f6584aa3/images/pexels-1.jpg


--------------------------------------------------------------------------------
/images/pexels-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/flex-grid-tutorial/aa4ed53f34aa84b2d278ebc350dbe9a6f6584aa3/images/pexels-2.jpg


--------------------------------------------------------------------------------
/images/pexels-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/flex-grid-tutorial/aa4ed53f34aa84b2d278ebc350dbe9a6f6584aa3/images/pexels-3.jpg


--------------------------------------------------------------------------------
/images/pexels-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/flex-grid-tutorial/aa4ed53f34aa84b2d278ebc350dbe9a6f6584aa3/images/pexels-4.jpg


--------------------------------------------------------------------------------
/images/pexels-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/flex-grid-tutorial/aa4ed53f34aa84b2d278ebc350dbe9a6f6584aa3/images/pexels-5.jpg


--------------------------------------------------------------------------------
/images/pexels-6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luxplanjay/flex-grid-tutorial/aa4ed53f34aa84b2d278ebc350dbe9a6f6584aa3/images/pexels-6.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="ru">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Сетка элементов на флексах</title>
  7 |     <link
  8 |       rel="stylesheet"
  9 |       href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.0.0/modern-normalize.min.css"
 10 |       integrity="sha512-ISS7cAi1PEhQ8jnbJpJZMd29NlhNj4AWYyLOSp2CE/CsHxTCu+r+t0D2yoJudVrd0/8fTVPUVDzY5Tvli75u/g=="
 11 |       crossorigin="anonymous"
 12 |     />
 13 |     <link rel="stylesheet" href="css/styles.css" />
 14 |   </head>
 15 |   <body>
 16 |     <div class="container">
 17 |       <h1 class="page-title">Популярные изображения</h1>
 18 | 
 19 |       <ul class="card-set">
 20 |         <li class="item">
 21 |           <article class="card">
 22 |             <div class="card-thumb">
 23 |               <img src="images/pexels-1.jpg" alt="" />
 24 |             </div>
 25 | 
 26 |             <div class="card-content">
 27 |               <h2 class="card-heading">Pexels 1</h2>
 28 |               <p class="card-text">
 29 |                 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et sed
 30 |                 placeat temporibus, culpa magnam illum in inventore voluptatem
 31 |                 laudantium optio.
 32 |               </p>
 33 |             </div>
 34 |           </article>
 35 |         </li>
 36 | 
 37 |         <li class="item">
 38 |           <article class="card">
 39 |             <div class="card-thumb">
 40 |               <img src="images/pexels-2.jpg" alt="" />
 41 |             </div>
 42 | 
 43 |             <div class="card-content">
 44 |               <h2 class="card-heading">Pexels 2</h2>
 45 |               <p class="card-text">
 46 |                 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et sed
 47 |                 placeat temporibus, culpa magnam illum in inventore voluptatem
 48 |                 laudantium optio.
 49 |               </p>
 50 |             </div>
 51 |           </article>
 52 |         </li>
 53 | 
 54 |         <li class="item">
 55 |           <article class="card">
 56 |             <div class="card-thumb">
 57 |               <img src="images/pexels-3.jpg" alt="" />
 58 |             </div>
 59 | 
 60 |             <div class="card-content">
 61 |               <h2 class="card-heading">Pexels 3</h2>
 62 |               <p class="card-text">
 63 |                 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et sed
 64 |                 placeat temporibus, culpa magnam illum in inventore voluptatem
 65 |                 laudantium optio.
 66 |               </p>
 67 |             </div>
 68 |           </article>
 69 |         </li>
 70 | 
 71 |         <li class="item">
 72 |           <article class="card">
 73 |             <div class="card-thumb">
 74 |               <img src="images/pexels-4.jpg" alt="" />
 75 |             </div>
 76 | 
 77 |             <div class="card-content">
 78 |               <h2 class="card-heading">Pexels 4</h2>
 79 |               <p class="card-text">
 80 |                 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et sed
 81 |                 placeat temporibus, culpa magnam illum in inventore voluptatem
 82 |                 laudantium optio.
 83 |               </p>
 84 |             </div>
 85 |           </article>
 86 |         </li>
 87 | 
 88 |         <li class="item">
 89 |           <article class="card">
 90 |             <div class="card-thumb">
 91 |               <img src="images/pexels-5.jpg" alt="" />
 92 |             </div>
 93 | 
 94 |             <div class="card-content">
 95 |               <h2 class="card-heading">Pexels 5</h2>
 96 |               <p class="card-text">
 97 |                 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et sed
 98 |                 placeat temporibus, culpa magnam illum in inventore voluptatem
 99 |                 laudantium optio.
100 |               </p>
101 |             </div>
102 |           </article>
103 |         </li>
104 | 
105 |         <li class="item">
106 |           <article class="card">
107 |             <div class="card-thumb">
108 |               <img src="images/pexels-6.jpg" alt="" />
109 |             </div>
110 | 
111 |             <div class="card-content">
112 |               <h2 class="card-heading">Pexels 6</h2>
113 |               <p class="card-text">
114 |                 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et sed
115 |                 placeat temporibus, culpa magnam illum in inventore voluptatem
116 |                 laudantium optio.
117 |               </p>
118 |             </div>
119 |           </article>
120 |         </li>
121 |       </ul>
122 |     </div>
123 |   </body>
124 | </html>
125 | 


--------------------------------------------------------------------------------