From 869dd2069c695ee7040cd3261713212155819f42 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Mon, 14 Dec 2020 12:18:12 -0500 Subject: final dump 2020-12-14 --- files/fa/glossary/grid/index.html | 77 --------------------------------------- 1 file changed, 77 deletions(-) delete mode 100644 files/fa/glossary/grid/index.html (limited to 'files/fa/glossary') diff --git a/files/fa/glossary/grid/index.html b/files/fa/glossary/grid/index.html deleted file mode 100644 index 1d77496989..0000000000 --- a/files/fa/glossary/grid/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Grid -slug: Glossary/Grid -translation_of: Glossary/Grid ---- -

A CSS grid i

- - - - - - - -

bnvbnvbngfid value of the {{cssxref("display")}} property; you can define columns and rows on your grid using the {{cssxref("grid-template-rows")}} and {{cssxref("grid-template-columns")}} properties.

- -

The grid that you define using these properties is described as an explicit grid.

- -

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 {{glossary("grid tracks", "tracks")}} to hold {{glossary("grid item", "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.

- -

In the example below I have created an explicit grid of three columns and two rows. 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>
-
-
- -

{{ EmbedLiveSample('example', '500', '330') }}

- - -- cgit v1.2.3-54-g00ecf