Grid
CSS ÐÑÐ¸Ð´Ñ (они же ÑеÑки или CSS Grid) ÑÑÑанавливаÑÑÑÑ Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ Ð·Ð½Ð°ÑÐµÐ½Ð¸Ñ grid в ÑвойÑÑве display; Ð²Ñ Ð¼Ð¾Ð¶ÐµÑе опÑеделиÑÑ ÐºÐ¾Ð»Ð¾Ð½ÐºÐ¸ и ÑÑÑоки в ÑеÑке Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ ÑвойÑÑв grid-template-columns и grid-template-rows ÑооÑвеÑÑÑвенно.
СеÑка, коÑоÑÑÑ Ð²Ñ ÑоздаÑÑе, иÑполÑзÑÑ ÑÑи ÑвойÑÑва, ÑвлÑеÑÑÑ Ñвной ÑеÑкой.
If you place content outside of this explicit grid, or if you are relying on auto-placement and the grid algorithm needs to create additional row or column tracks to hold grid items, then extra tracks will be created in the implicit grid. The implicit grid is the grid created automatically due to content being added outside of the tracks defined.
РпÑимеÑе ниже оÑобÑажена ÑоÑÐ½Ð°Ñ ÑеÑка из ÑÑÑÑ ÐºÐ¾Ð»Ð¾Ð½Ð¾Ðº и двÑÑ ÑÑдов. The third row on the grid is an implicit grid row track, formed due to their being more than the six items which fill the explicit tracks.
ÐÑимеÑ
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
}
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
</div>
ÐополниÑелÑнÑе маÑеÑиалÑ
Ð ÑководÑÑво по ÑвойÑÑвам
ЧÑо поÑиÑаÑÑ ÐµÑÑ
- Ð ÑководÑÑво по CSS Grid: ÐазовÑе пÑинÑÐ¸Ð¿Ñ CSS ÑеÑок