diff options
Diffstat (limited to 'files/uk/web/css/css_grid_layout/index.html')
| -rw-r--r-- | files/uk/web/css/css_grid_layout/index.html | 245 |
1 files changed, 0 insertions, 245 deletions
diff --git a/files/uk/web/css/css_grid_layout/index.html b/files/uk/web/css/css_grid_layout/index.html deleted file mode 100644 index e403f8364f..0000000000 --- a/files/uk/web/css/css_grid_layout/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: CSS Grid Layout -slug: Web/CSS/CSS_Grid_Layout -tags: - - CSS - - Grid Layout - - Grids - - Layout - - NeedsTranslation - - Overview - - Reference - - TopicStub -translation_of: Web/CSS/CSS_Grid_Layout ---- -<p><strong>CSS Grid layout</strong> відзначається тим, що розділяє сторінку на ділянки чи задає співвідношення між елементами, побудованими з HTML примітивів, з точки зору розміру, положення та слоїв.</p> - -<p>Подібно до таблиць, CSS Grid дозволяє автору вирівнювати елементи у стовпчиках та рядках. Однак, CSS Grid, в порівнянні з таблицями, надає більше можливостей і полегшує створення макетів. Наприклад, дочірні елементи Grid-контейнера можуть перекривати один одного і нашаровуватись, подібно до позиційованих CSS елементів.</p> - -<h2 id="Basic_Example" name="Basic_Example">Базовий приклад</h2> - -<p><span id="result_box" lang="uk"><span>У наведеному нижче прикладі показана сітка з трьома стовпчиками, в якій нові рядки мають мінімальну висоту 100 пікселів, а максимальна висота вираховується автоматично.</span> <span>Елементи розміщені в сітці використовуючи лінійне розташування .</span></span></p> - -<div id="example"> -<div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} -.wrapper { - max-width: 940px; - margin: 0 auto; -} - -.wrapper > div { - border: 2px solid rgb(233,171,88); - border-radius: 5px; - background-color: rgba(233,171,88,.5); - padding: 1em; - color: #d9480f; -}</pre> -</div> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><div class="wrapper"> - <div class="one">One</div> - <div class="two">Two</div> - <div class="three">Three</div> - <div class="four">Four</div> - <div class="five">Five</div> - <div class="six">Six</div> -</div></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 10px; - grid-auto-rows: minmax(100px, auto); -} -.one { - grid-column: 1 / 3; - grid-row: 1; -} -.two { - grid-column: 2 / 4; - grid-row: 1 / 3; -} -.three { - grid-column: 1; - grid-row: 2 / 5; -} -.four { - grid-column: 3; - grid-row: 3; -} -.five { - grid-column: 2; - grid-row: 4; -} -.six { - grid-column: 3; - grid-row: 4; -} -</pre> - -<p>{{ EmbedLiveSample('example', '500', '440') }}</p> -</div> - -<h2 id="Посилання">Посилання</h2> - -<h3 id="CSS_властивості">CSS властивості</h3> - -<div class="index"> -<ul> - <li>{{cssxref("grid-template-columns")}}</li> - <li>{{cssxref("grid-template-rows")}}</li> - <li>{{cssxref("grid-template-areas")}}</li> - <li>{{cssxref("grid-template")}}</li> - <li>{{cssxref("grid-auto-columns")}}</li> - <li>{{cssxref("grid-auto-rows")}}</li> - <li>{{cssxref("grid-auto-flow")}}</li> - <li>{{cssxref("grid")}}</li> - <li>{{cssxref("grid-row-start")}}</li> - <li>{{cssxref("grid-column-start")}}</li> - <li>{{cssxref("grid-row-end")}}</li> - <li>{{cssxref("grid-column-end")}}</li> - <li>{{cssxref("grid-row")}}</li> - <li>{{cssxref("grid-column")}}</li> - <li>{{cssxref("grid-area")}}</li> - <li>{{cssxref("grid-row-gap")}}</li> - <li>{{cssxref("grid-column-gap")}}</li> - <li>{{cssxref("grid-gap")}}</li> -</ul> -</div> - -<h3 id="CSS_функції">CSS функції</h3> - -<div class="index"> -<ul> - <li>{{cssxref("repeat", "repeat()")}}</li> - <li>{{cssxref("minmax", "minmax()")}}</li> - <li>{{cssxref("fit-content", "fit-content()")}}</li> -</ul> -</div> - -<h3 id="Глосарій">Глосарій</h3> - -<div class="index"> -<ul> - <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Lines">Grid Lines</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Tracks">Grid Tracks</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Cell">Grid Cell</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Areas">Grid Area</a></li> - <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Rows">Grid row</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Column">Grid column</a></li> -</ul> -</div> - -<h2 id="Посібники">Посібники</h2> - -<div class="index"> -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of Grid Layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship of Grid Layout to other layout methods</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Layout using line-based placement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in CSS Grid Layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid Layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grid, Logical Values and Writing Modes</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and accessibility</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid and progressive enhancement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">Realising common layouts using CSS Grid</a></li> -</ul> -</div> - -<h2 id="Зовнішні_ресурси">Зовнішні ресурси</h2> - -<ul> - <li><a href="http://labs.jensimmons.com/">Examples from Jen Simmons</a></li> - <li><a href="http://gridbyexample.com/">Grid by Example - a collection of usage examples and video tutorials</a></li> - <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops Grid Reference</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li> - <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li> - <li><a href="http://cssgridgarden.com">Grid Garden</a> - Гра для вивчення CSS grid</li> -</ul> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Grid') }}</td> - <td>{{ Spec2('CSS3 Grid') }}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<section class="Quick_links" id="Quick_Links"> -<ol> - <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> - <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> - <li data-default-state="open"><a href="#"><strong>Guides</strong></a> - <ol> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Properties</strong></a> - <ol> - <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> - <ol> - <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> - <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> - <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> - <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> - <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> - <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> - <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> - <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> - </ol> - </li> -</ol> -</section> |