Podhod GRID

by vovkasolovev

HTML

Люди
<div class="regular_grid_container flip-containers">
<div class="regular_grid_element flip-container">1</div>
<div class="regular_grid_element flip-container">2</div>
<div class="regular_grid_element flip-container">3</div>
<div class="regular_grid_element flip-container">4</div>
<div class="regular_grid_element flip-container">5</div>
<div class="regular_grid_element flip-container">6</div>
<div class="regular_grid_element flip-container">7</div>
<div class="regular_grid_element flip-container">8</div>
<div class="regular_grid_element flip-container">9</div>
<div class="regular_grid_element flip-container">10</div>
<div class="regular_grid_element flip-container">11</div>
<div class="regular_grid_element flip-container">12</div>
<div class="regular_grid_element flip-container">13</div>
</div>
Портфолио
<div class="regular_grid_container portfolio_blocks">
<div class="regular_grid_element portfolio_block">1</div>
<div class="regular_grid_element portfolio_block">2</div>
<div class="regular_grid_element portfolio_block">3</div>
<div class="regular_grid_element portfolio_block">4</div>
<div class="regular_grid_element portfolio_block">5</div>
<div class="regular_grid_element portfolio_block">6</div>
<div class="regular_grid_element portfolio_block">7</div>
<div class="regular_grid_element portfolio_block">8</div>
<div class="regular_grid_element portfolio_block">9</div>
<div class="regular_grid_element portfolio_block">10</div>
<div class="regular_grid_element portfolio_block">11</div>
<div class="regular_grid_element portfolio_block">12</div>
<div class="regular_grid_element portfolio_block">13</div>
</div>
Услуги
<div class="regular_grid_container service_blocks">
<div class="regular_grid_element service_block">1</div>
<div class="regular_grid_element service_block">2</div>
<div class="regular_grid_element service_block">3</div>
<div class="regular_grid_element service_block">4</div>
<div class="regular_grid_element service_block">5</div>
<div...

CSS

.regular_grid_container {text-align: center; line-height: 0; display: grid; justify-content: space-between;}

.flip-containers{grid-template-columns: repeat(auto-fill, minmax(220px, 220px)); grid-gap: 20px 40px;}
@media all and (max-width: 1060px) {.flip-containers {grid-gap: 0 20px; justify-content: space-around ; }}
.portfolio_blocks { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-gap: 0 0}
#mainpage .portfolio_blocks { grid-template-columns: repeat(auto-fill, minmax(50%, 1fr)); grid-gap: 0 0}
@media all and (max-width: 640px) {#mainpage .portfolio_blocks { grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));}}
.service_blocks { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-gap: 20px 20px;}

.regular_grid_element {display: inline-block; margin:0; min-width:320px}
.flip-containers .regular_grid_element {min-width:240px}

.regular_grid_element{background: linear-gradient(135deg, rgba(250,250,250,1) 0%,rgba(23,23,23,0.8) 100%);}
.flip-container{height: 30px;}
.portfolio_block {height: 50px;}
.service_block {height: 40px;}