diff options
Diffstat (limited to 'files/fa/glossary/grid/index.html')
-rw-r--r-- | files/fa/glossary/grid/index.html | 77 |
1 files changed, 0 insertions, 77 deletions
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 ---- -<p>A <em>CSS grid</em> i</p> - - - - - - - -<p><code>bnvbnvbngfid</code> 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.</p> - -<p>The grid that you define using these properties is described as an <em>explicit grid</em>.</p> - -<p>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 <em>implicit grid</em> is the grid created automatically due to content being added outside of the tracks defined.</p> - -<p>In the example below I have created an <em>explicit grid</em> of three columns and two rows. The <em>third</em> row on the grid is an <em>implicit grid</em> row track, formed due to their being more than the six items which fill the explicit tracks.</p> - -<div id="example"> -<div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > div { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: css notranslate">.wrapper { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-template-rows: 100px 100px; -} -</pre> - -<pre class="brush: html notranslate"><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> -</pre> -</div> - -<p>{{ EmbedLiveSample('example', '500', '330') }}</p> - -<section class="Quick_links" id="Quick_Links"> -<ol> - <li>CSS Grid Layout Guide:<br> - <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of grid layout</a></em></li> - <li>Property reference - <ol> - <li>{{cssxref("grid-template-columns")}}</li> - <li>{{cssxref("grid-template-rows")}}</li> - <li>{{cssxref("grid")}}</li> - <li>{{cssxref("grid-template")}}</li> - </ol> - </li> -</ol> -</section> |