diff options
Diffstat (limited to 'files/pl/web/css/css_grid_layout')
3 files changed, 1448 insertions, 0 deletions
diff --git a/files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html new file mode 100644 index 0000000000..eb9d550390 --- /dev/null +++ b/files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html @@ -0,0 +1,609 @@ +--- +title: Auto-placement in CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +--- +<p>Poza możliwością umieszczania elementów</p> + +<div id="placement_1"> +<div class="hidden"> +<pre class="brush: css">* {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">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('placement_1', '500', '230') }}</p> +</div> + +<h2 id="Default_rules_for_auto-placement">Default rules for auto-placement</h2> + +<p>As you can see with the above example, if you create a grid all child items will lay themselves out one into each grid cell. The default flow is to arrange items by row. Grid will lay an item out into each cell of row 1. If you have created additional rows using the <code>grid-template-rows</code> property then grid will continue placing items in these rows. If the grid does not have enough rows in the explicit grid to place all of the items new <em>implicit</em> rows will be created.</p> + +<h3 id="Sizing_rows_in_the_implicit_grid">Sizing rows in the implicit grid</h3> + +<p>The default for automatically created rows in the implicit grid is for them to be auto-sized. This means that they will contain the content added to them without causing an overflow.</p> + +<p>You can however control the size of these rows with the property <code>grid-auto-rows</code>. To cause all created rows to be 100 pixels tall for example you would use:</p> + +<div id="placement_2"> +<div class="hidden"> +<pre class="brush: css">* {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: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: 100px; +} +</pre> + +<p>{{ EmbedLiveSample('placement_2', '500', '330') }}</p> +</div> + +<p>You can use {{cssxref("minmax","minmax()")}} in your value for {{cssxref("grid-auto-rows")}} enabling the creation of rows that are a minimum size but then grow to fit content if it is taller.</p> + +<div id="placement_3"> +<div class="hidden"> +<pre class="brush: css">* {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: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four + <br>This cell + <br>Has extra + <br>content. + <br>Max is auto + <br>so the row expands. + </div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: minmax(100px, auto); +} +</pre> + +<p>{{ EmbedLiveSample('placement_3', '500', '330') }}</p> +</div> + +<p>You can also pass in a track listing, this will repeat. The following track listing will create an initial implicit row track as 100 pixels and a second as <code>200px</code>. This will continue for as long as content is added to the implicit grid. <strong>Track listings are not supported in Firefox.</strong></p> + +<div id="placement_4"> +<div class="hidden"> +<pre class="brush: css">* {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: html"><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> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: 100px 200px; +} +</pre> + +<p>{{ EmbedLiveSample('placement_4', '500', '330') }}</p> +</div> + +<h3 id="Auto-placement_by_column">Auto-placement by column</h3> + +<p>You can also ask grid to auto-place items by column. Using the property {{cssxref("grid-auto-flow")}} with a value of <code>column</code>. In this case grid will add items in rows that you have defined using {{cssxref("grid-template-rows")}}. When it fills up a column it will move onto the next explicit column, or create a new column track in the implicit grid. As with implicit row tracks, these column tracks will be auto sized. You can control the size of implicit column tracks with {{cssxref("grid-auto-columns")}}, this works in the same way as {{cssxref("grid-auto-rows")}}.</p> + +<p>In this next example I have created a grid with three row tracks of 200 pixels height. I am auto-placing by column and the columns created will be a column width of 300 pixels, then a column width of 100 pixels until there are enough column tracks to hold all of the items.</p> + +<div id="placement_5"> +<pre class="brush: css">.wrapper { + display: grid; + grid-template-rows: repeat(3, 200px); + grid-gap: 10px; + grid-auto-flow: column; + grid-auto-columns: 300px 100px; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {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: html"><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> + +<p>{{ EmbedLiveSample('placement_5', '500', '640') }}</p> +</div> + +<h2 id="The_order_of_auto_placed_items">The order of auto placed items</h2> + +<p>A grid can contain a mixture of items. Some of the items may have a position on the grid, but others may be auto-placed. This can be helpful, if you have a document order that reflects the order in which items sit on the grid you may not need to write CSS rules to place absolutely everything. The specification contains a long section detailing the <a href="https://drafts.csswg.org/css-grid/#auto-placement-algo">Grid item placement algorithm</a>, however for most of us we just need to remember a few simple rules for our items.</p> + +<h3 id="Order_modified_document_order">Order modified document order</h3> + +<p>Grid places items that have not been given a grid position in what is described in the specification as “order modified document order”. This means that if you have used the <code>order</code> property at all, the items will be placed by that order, not their DOM order. Otherwise they will stay by default in the order that they are entered in the document source.</p> + +<h3 id="Items_with_placement_properties">Items with placement properties</h3> + +<p>The first thing grid will do is place any items that have a position. In the example below I have 12 grid items. Item 2 and item 5 have been placed using line based placement on the grid. You can see how those items are placed and the other items then auto-place in the spaces. The auto-placed items will place themselves before the placed items in DOM order, they don’t start after the position of a placed item that comes before them.</p> + +<div id="placement_6"> +<div class="hidden"> +<pre class="brush: css">* {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: html"><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>Nine</div> + <div>Ten</div> + <div>Eleven</div> + <div>Twelve</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 100px; + grid-gap: 10px; +} + .wrapper div:nth-child(2) { + grid-column: 3; + grid-row: 2 / 4; + } + .wrapper div:nth-child(5) { + grid-column: 1 / 3; + grid-row: 1 / 3; +} +</pre> + +<p>{{ EmbedLiveSample('placement_6', '500', '450') }}</p> +</div> + +<h3 id="Deal_with_items_that_span_tracks">Deal with items that span tracks</h3> + +<p>You can use placement properties while still taking advantage of auto-placement. In this next example I have added to the layout by setting odd items to span two tracks both for rows and columns. I do this with the {{cssxref("grid-column-end")}} and {{cssxref("grid-row-end")}} properties and setting the value of this to <code>span 2</code>. What this means is that the start line of the item will be set by auto-placement, and the end line will span two tracks.</p> + +<p>You can see how this then leaves gaps in the grid, as for the auto-placed items if grid comes across an item that doesn’t fit into a track, it will move to the next row until it finds a space the item can fit in.</p> + +<div id="placement_7"> +<div class="hidden"> +<pre class="brush: css">* {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: html"><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>Nine</div> + <div>Ten</div> + <div>Eleven</div> + <div>Twelve</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 100px; + grid-gap: 10px; +} +.wrapper div:nth-child(4n+1) { + grid-column-end: span 2; + grid-row-end: span 2; + background-color: #ffa94d; +} + .wrapper div:nth-child(2) { + grid-column: 3; + grid-row: 2 / 4; + } + .wrapper div:nth-child(5) { + grid-column: 1 / 3; + grid-row: 1 / 3; +} +</pre> + +<p>{{ EmbedLiveSample('placement_7', '500', '770') }}</p> +</div> + +<h3 id="Filling_in_the_gaps">Filling in the gaps</h3> + +<p>So far, other than items we have specifically placed, grid is always progressing forward and keeping items in DOM order. This is generally what you want, if you are laying out a form for example you wouldn’t want the labels and fields to become jumbled up in order to fill in some gap. However sometimes, we are laying things out that don’t have a logical order and we would like to create a layout that doesn’t have gaps in it.</p> + +<p>To do this, add the property {{cssxref("grid-auto-flow")}} with a value of <code>dense</code> to the container. This is the same property you use to change the flow order to <code>column</code>, so if you were working in columns you would add both values <code>grid-auto-flow: column dense</code>.</p> + +<p>Having done this, grid will now backfill the gaps, as it moves through the grid it leaves gaps as before, but then if it finds an item that will fit in a previous gap it will pick it up and take it out of DOM order to place it in the gap. As with any other reordering in grid this does not change the logical order. Tab order for example, will still follow the document order. We will take a look at the potential accessibility issues of Grid Layout in a later guide, but you should take care when creating this disconnect between the visual order and display order.</p> + +<div id="placement_8"> +<div class="hidden"> +<pre class="brush: css">* {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: html"><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>Nine</div> + <div>Ten</div> + <div>Eleven</div> + <div>Twelve</div> +</div> +</pre> + +<pre class="brush: css">.wrapper div:nth-child(4n+1) { + grid-column-end: span 2; + grid-row-end: span 2; + background-color: #ffa94d; +} + .wrapper div:nth-child(2) { + grid-column: 3; + grid-row: 2 / 4; + } + .wrapper div:nth-child(5) { + grid-column: 1 / 3; + grid-row: 1 / 3; +} +.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 100px; + grid-gap: 10px; + grid-auto-flow: dense; +} +</pre> + +<p>{{ EmbedLiveSample('placement_8', '500', '730') }}</p> +</div> + +<h3 id="Anonymous_grid_items">Anonymous grid items</h3> + +<p>There is a mention in the specification of anonymous grid items. These are created if you have a string of text inside your grid container, that is not wrapped in any other element. In the example below we have three grid items, assuming you had set the parent with a class of <code>grid</code> to <code>display: grid</code>. The first is an anonymous item as it has no enclosing markup, this item will always be dealt with via the auto-placement rules. The other two are grid items enclosed in a div, they might be auto-placed or you could place these with a positioning method onto your grid.</p> + +<pre class="brush: css"><div class="grid"> + I am a string and will become an anonymous item + <div>A grid item</div> + <div>A grid item</div> +</div> +</pre> + +<p>Anonymous items are always auto-placed because there is no way to target them. Therefore if you have some unwrapped text for some reason in your grid, be aware that it might show up somewhere unexpected as it will be auto-placed according to the auto-placement rules.</p> + +<h3 id="Use_cases_for_auto-placement">Use cases for auto-placement</h3> + +<p>Auto-placement is useful whenever you have a collection of items. That could be items that do not have a logical order such as a gallery of photos, or product listing. In that case you might choose to use the dense packing mode to fill in any holes in your grid. In my image gallery example I have some landscape and some portrait images. I have set landscape images – with a class of <code>landscape</code> to span two column tracks. I then use <code>grid-auto-flow: dense</code> to create a densely packed grid.</p> + +<div id="placement_9"> +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); + grid-gap: 10px; + grid-auto-flow: dense; + list-style: none; + margin: 1em auto; + padding: 0; + max-width: 800px; +} +.wrapper li { + border: 1px solid #ccc; +} +.wrapper li.landscape { + grid-column-end: span 2; +} +.wrapper li img { + display: block; + object-fit: cover; + width: 100%; + height: 100%; +} +</pre> + +<pre class="brush: html"><ul class="wrapper"> + <li><img src="https://placehold.it/200x300" alt="placeholder"></li> + <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> + <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> + <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> + <li><img src="https://placehold.it/200x300" alt="placeholder"></li> + <li><img src="https://placehold.it/200x300" alt="placeholder"></li> + <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> + <li><img src="https://placehold.it/200x300" alt="placeholder"></li> + <li><img src="https://placehold.it/200x300" alt="placeholder"></li> + <li><img src="https://placehold.it/200x300" alt="placeholder"></li> +</ul> +</pre> + +<p>{{ EmbedLiveSample('placement_9', '500', '1300') }}</p> +</div> + +<p>Auto-placement can also help you lay out interface items which do have logical order. An example is the definition list in this next example. Definition lists are an interesting challenge to style as they are flat, there is nothing wrapping the groups of <code>dt</code> and <code>dd</code> items. In my example I am allowing auto-placement to place the items, however I have classes that start a <code>dt</code> in column 1, and <code>dd</code> in column 2, this ensure that terms go on one side and definitions on the other - no matter how many of each we have.</p> + +<div id="placement_10"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <dl> + <dt>Mammals</dt> + <dd>Cat</dd> + <dd>Dog</dd> + <dd>Mouse</dd> + <dt>Fish</dt> + <dd>Guppy</dd> + <dt>Birds</dt> + <dd>Pied Wagtail</dd> + <dd>Owl</dd> + </dl> +</div> +</pre> + +<pre class="brush: css">dl { + display: grid; + grid-template-columns: auto 1fr; + max-width: 300px; + margin: 1em; + line-height: 1.4; +} +dt { + grid-column: 1; + font-weight: bold; +} +dd { + grid-column: 2; + } +</pre> + +<p>{{ EmbedLiveSample('placement_10', '500', '230') }}</p> +</div> + +<h2 id="What_can’t_we_do_with_auto-placement_yet">What can’t we do with auto-placement (yet)?</h2> + +<p>There are a couple of things that often come up as questions. Currently we can’t do things like target every other cell of the grid with our items. A related issue may have already come to mind if you followed the last guide about named lines on the grid. It would be to define a rule that said “auto-place items against the next line named “n”, and grid would then skip other lines.There is <a href="https://github.com/w3c/csswg-drafts/issues/796">an issue raised about this</a> on the CSSWG GitHub repository, and you would be welcome to add your own use cases to this.</p> + +<p>It may be that you come up with your own use cases for auto-placement or any other part of grid layout. If you do, raise them as issues or add to an existing issue that could solve your use case. This will help to make future versions of the specification better.</p> + +<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> diff --git a/files/pl/web/css/css_grid_layout/index.html b/files/pl/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..0894a70679 --- /dev/null +++ b/files/pl/web/css/css_grid_layout/index.html @@ -0,0 +1,245 @@ +--- +title: CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout +tags: + - CSS +translation_of: Web/CSS/CSS_Grid_Layout +--- +<p><strong>CSS Grid Layout</strong> jest najlepszą metodą aby podzielić strone na części lub definiowanie relacji takich jak rozmiar, pozycja i warstwa, pomiędzy podstawowymi elementami HTML.</p> + +<p>Podobnie do tabel (ang. "tables"), rozmieszczenie grid <em>(ang. "siatka")</em> pozwala autorowi wyrównać elementy w kolumny i wiersze. Jednakowoż grid pozwala na wiele więcej ułożeń niż tabele. Na przykład kontener grid potrafi spozycjonować elementy wewnątrz siebie w taki sposób aby na siebie nachodziły oraz używały warstw, podobnie jak elementy pozycjonowane przy użyciu CSS.</p> + +<h2 id="Basic_Example" name="Basic_Example">Przykład</h2> + +<p>Przykład poniżej pokazuje trzy kolumnową ścieżkę siatki z utworzonymi nowymi wierszami z ustawioną własnością minimalną na 100 pikseli i wartością maksymalną ustawioną na auto. Elementy zostały ustawione na siatce przy pomocy miejsc opartych na liniach siatki.</p> + +<div id="example"> +<div class="hidden"> +<pre class="brush: css">* {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"><div class="wrapper"> + <div class="one">Jeden</div> + <div class="two">Dwa</div> + <div class="three">Trzy</div> + <div class="four">Cztery</div> + <div class="five">Pięć</div> + <div class="six">Sześć</div> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.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="Reference">Reference</h2> + +<h3 id="Własności_CSS">Własności 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_functions">CSS functions</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="CSS_data_types">CSS data types</h3> + +<div class="index"> +<ul> + <li>{{cssxref("<flex>")}}</li> +</ul> +</div> + +<h3 id="Glossary_entries">Glossary entries</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="Poradniki">Poradniki</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="Zewnętrzne_źródła">Zewnętrzne źródła</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> +</ul> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</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> diff --git a/files/pl/web/css/css_grid_layout/realizacja_typowych_ukladow_za_pomoca_ukladu_siatki_css/index.html b/files/pl/web/css/css_grid_layout/realizacja_typowych_ukladow_za_pomoca_ukladu_siatki_css/index.html new file mode 100644 index 0000000000..93ac130fce --- /dev/null +++ b/files/pl/web/css/css_grid_layout/realizacja_typowych_ukladow_za_pomoca_ukladu_siatki_css/index.html @@ -0,0 +1,594 @@ +--- +title: Projektowanie typowych układów za pomocą układu siatki CSS +slug: >- + Web/CSS/CSS_Grid_Layout/Realizacja_typowych_ukladow_za_pomoca_ukladu_siatki_CSS +translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout +--- +<p>Na zakończenie tego zestawu poradników do Układów Siatki CSS (ang. CSS Grid Layout), przejdę przez kilka różnych układów, demonstrujących niektóre z technik, których można użyć podczas projektowania z użyciem tej technologii. Przyjrzymy się przykładowi, korzystającemu z wartości <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">grid-template-areas</a>, typowemu 12-kolumnowemu systemowi elastycznej siatki, a także wykazowi produktów stworzonemu za pomocą automatycznego rozmieszczania. Jak wynika z wyżej przedstawionych przykładów, często istnieje więcej niż jeden sposób, aby osiągnąć pożądany efekt z układem siatki. Wybierz tę metodę, która jest najbardziej pomocna w rozwiązaniu problemów przed którymi stoisz i dla projektów, które realizujesz.</p> + +<h2 id="Responsywny_układ_strony_korzystający_z_1_do_3_kolumn_o_zmiennej_pozycji_elementów_przy_użyciu_grid-template-areas">Responsywny układ strony korzystający z 1 do 3 kolumn o zmiennej pozycji elementów przy użyciu <code>grid-template-areas</code></h2> + +<p>Znacząca część stron internetowych jest odmianą tego typu układu; zawierającego treść, panele boczne, nagłówek oraz stopkę. Podczas projektowania responsywnej witryny, możesz zechcieć wyświetlić stronę w układzie pojedynczej kolumny dla małych ekranów, dla wyświetlacza o wartości granicznej dodać panel boczny, a dla najszerszych ekranów wprowadzić układ w trzech kolumnach.</p> + +<p><img alt="Image of the three different layouts created by redefining our grid at two breakpoints." src="https://mdn.mozillademos.org/files/14749/11-responsive-areas.png"></p> + +<p>Zamierzam stworzyć taki układ korzystając z <em>nazwanych pól szablonu, </em>o których możecie dowiedzieć się więcej z kursu <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em>.</p> + +<p>Mój szkielet składa się z pojemnika zawierającego elementy z przeznaczeniem na: nagłówek i stopkę, główną zawartość strony, menu, panel boczny oraz blok przeznaczony na reklamę.</p> + +<div id="layout_1"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + + .wrapper { + max-width: 1024px; + margin: 0 auto; + font: 1.2em Helvetica, arial, sans-serif; + } + + .wrapper > * { + border: 2px solid #f08c00; + background-color: #ffec99; + border-radius: 5px; + padding: 10px; + } + + nav ul { + list-style: none; + margin: 0; + padding: 0; + } +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <header class="main-head">The header</header> + <nav class="main-nav"> + <ul> + <li><a href="">Nav 1</a></li> + <li><a href="">Nav 2</a></li> + <li><a href="">Nav 3</a></li> + </ul> + </nav> + <article class="content"> + <h1>Main article area</h1> + <p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p> + </article> + <aside class="side">Sidebar</aside> + <div class="ad">Advertising</div> + <footer class="main-footer">The footer</footer> +</div> +</pre> + +<p>Używamy cechy {{cssxref("grid-template-areas")}} by stworzyć układ strony. Nie korzystamy jeszcze z <em>zapytań o środki dostępu</em> (ang. media-queries). Musimy teraz nadać odpowiednie nazwy polom. Żeby to zrobić skorzystamy z właściwości {{cssxref("grid-area")}}.</p> + +<pre class="brush: css">.main-head { + grid-area: header; +} +.content { + grid-area: content; +} +.main-nav { + grid-area: nav; +} +.side { + grid-area: sidebar; +} +.ad { + grid-area: ad; +} +.main-footer { + grid-area: footer; +} +</pre> + +<p>Sama w sobie, operacja ta nie tworzy żadnego układu, aczkolwiek pozwala nam na to, dzięki nadanym nazwom. Nadal nie korzystając z <em>zapytań o urządzenie dostępu</em>, nadam teraz stronie układ tworzony z myślą o wyświetlaczach mobilnych. W tym wypadku zachowam pierwotną kolejność elementów, taką jak w układzie szkieletu, starając się uniknąć najmniejszego rozdźwięku pomiędzy szablonem znaczników, a ukladem siatki, zgodnie z poradami zawartymi w <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">Grid layout and accessibility</a></em>. Nie definuję kolumn, ani rzędów, jednak taka stylizacja tworzy nam układ jednokolumnowy, co się zaś tyczy rzędów, zostaną stworzone samoistnie dla każdego elementu wskazanej siatki.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-gap: 20px; + grid-template-areas: + "header" + "nav" + "content" + "sidebar" + "ad" + "footer"; +} +</pre> + +<p>Zdefiniowany mobilny układ strony (jedna kolumna) będzie się teraz wyświetlał jednakowo na każdym urządzeniu, nieleżnie od jego rozmiarów. Żeby to zmienić możemy posłużyć się <em>zapytaniem o środek dostępu</em> i przedefiniować nasz układ na wypadek, gdyby pojawiło się wystarczająco dużo miejsca na ekranie, żeby zmieścić kolejną kolumnę.</p> + +<pre class="brush: css">@media (min-width: 500px) { + .wrapper { + grid-template-columns: 1fr 3fr; + grid-template-areas: + "header header" + "nav nav" + "sidebar content" + "ad footer"; + } + nav ul { + display: flex; + justify-content: space-between; + } +} +</pre> + +<p>Możesz zaobserwować, jak będzie wyglądał nowy układ przyglądając się wartości cechy {{cssxref("grid-template-areas")}}. Element <code>header</code> (nagłówek) rozciąga się na dwie kolumny, tak, jak i element <code>nav </code>(menu). Wtrzecim rzędzie sąsiaduje element <code>sidebar</code> (panel boczny) oraz element <code>content </code>(zawartość strony). W czwartym rzędzie umieściłem element <code>ad</code> (blok reklamowy) zamiast panelu bocznego, a na samym końcu element <code>footer</code> (stopkę) rozciągnietą na cały piąty rząd. Użyłem elastycznego bloku (<em>flexbox</em>) dla menu, tak by wyświetliło się w oddalonym rzędzie.</p> + +<p>Mogę teraz dodać ostatnią wartość graniczną, wyznaczającą przejście do układu w trzech kolumnach.</p> + +<pre class="brush: css">@media (min-width: 700px) { + .wrapper { + grid-template-columns: 1fr 4fr 1fr; + grid-template-areas: + "header header header" + "nav content sidebar" + "nav content ad" + "footer footer footer" + } + nav ul { + flex-direction: column; + } +} +</pre> + +<p>The three-column layout has two <code>1fr</code> unit side columns and a middle column that has <code>4fr</code> as the track size. This means that the available space in the container is split into 6 and assigned in proportion to our three tracks – one part each to the side columns and 4 parts to the center.</p> + +<p>In this layout I am displaying the <code>nav</code> in the left column, alongside the <code>content</code>. In the right column we have the <code>sidebar</code> and underneath it the advertisements (<code>ad</code>). The <code>footer</code> now spans right across the bottom of the layout. I then use a flexbox to display the navigation as a column.</p> + +<p>{{ EmbedLiveSample('layout_1', '800', '500') }}</p> +</div> + +<p>This is a simple example but demonstrates how we can use a grid layout to rearrange our layout for different breakpoints. In particular I am changing the location of that <code>ad</code> block, as appropriate in my different column setups. I find this named areas method very helpful at a prototyping stage, it is easy to play around with the location of elements. You could always begin to use grid in this way for prototyping, even if you can’t rely on it fully in production due to the browsers that visit your site.</p> + +<h2 id="A_flexible_12-column_layout">A flexible 12-column layout</h2> + +<p>If you have been working with one of the many frameworks or grid systems you may be accustomed to laying out your site on a 12- or 16-column flexible grid. We can create this type of system using CSS Grid Layout. As a simple example, I am creating a 12-column flexible grid that has 12 <code>1fr</code>-unit column tracks, they all have a start line named <code>col-start</code>. This means that we will have twelve grid lines named <code>col-start</code>.</p> + +<div id="layout_2"> +<div class="hidden"> +<pre class="brush: css">.wrapper { + max-width: 1024px; + margin: 0 auto; + font: 1.2em Helvetica, arial, sans-serif; +} +.wrapper > * { + border: 2px solid #f08c00; + background-color: #ffec99; + border-radius: 5px; + padding: 10px; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(12, [col-start] 1fr); + grid-gap: 20px; +} +</pre> + +<p>To demonstrate how this grid system works I have four child elements inside my wrapper.</p> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Start column line 1, span 3 column tracks.</div> + <div class="item2">Start column line 6, span 4 column tracks. 2 row tracks.</div> + <div class="item3">Start row 2 column line 2, span 2 column tracks.</div> + <div class="item4">Start at column line 3, span to the end of the grid (-1).</div> +</div> +</pre> + +<p>I can then place these on the grid using the named lines, and also the span keyword.</p> + +<pre class="brush: css">.item1 { + grid-column: col-start / span 3; +} +.item2 { + grid-column: col-start 6 / span 4 ; + grid-row: 1 / 3; +} +.item3 { + grid-column: col-start 2 / span 2; + grid-row: 2; +} +.item4 { + grid-column: col-start 3 / -1; + grid-row: 3; +} +</pre> + +<p>{{ EmbedLiveSample('layout_2', '800', '400') }}</p> +</div> + +<p>As described in the <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">guide to named lines</a>, we are using the named line to place our item. As we have 12 lines all with the same name we use the name, and then the index of the line. You could also use the line index itself if you prefer and avoid using named lines at all.</p> + +<p>Rather than setting the end line number, I have chosen to say how many tracks this element should span, using the <code>span</code> keyword. I like this approach as when working with a multiple-column layout system we usually think of blocks in terms of the number of tracks of the grid they span, and adjust that for different breakpoints. To see how the blocks align themselves to the tracks, use the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a>. It clearly demonstrates how our items are placed.</p> + +<p><img alt="Showing the items placed on the grid with grid tracks highlighted." src="https://mdn.mozillademos.org/files/14753/11-grid-inspector-12col.png"></p> + +<p>There are some key differences with how a grid layout works over the grid systems you may have used previously. As you can see, we do not need to add any markup to create a row, grid systems need to do this to stop elements popping up into the row above. With CSS Grid Layout, we can place things into rows, with no danger of them rising up into the row above if it is left empty. Due to this <em>strict</em> column and row placement we can also easily leave white space in our layout. We also don’t need special classes to pull or push things, to indent them into the grid. All we need to do is specify the start and end line for the item.</p> + +<h3 id="Building_a_layout_using_the_12-column_system">Building a layout using the 12-column system</h3> + +<p>To see how this layout method works in practice, we can create the same layout that we created with {{cssxref("grid-template-areas")}}, this time using the 12-column grid system. I am starting with the same markup as used for the grid template areas example.</p> + +<div id="layout_3"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + + .wrapper { + max-width: 1024px; + margin: 0 auto; + font: 1.2em Helvetica, arial, sans-serif; + } + + .wrapper > * { + border: 2px solid #f08c00; + background-color: #ffec99; + border-radius: 5px; + padding: 10px; + } + + nav ul { + list-style: none; + margin: 0; + padding: 0; + } +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <header class="main-head">The header</header> + <nav class="main-nav"> + <ul> + <li><a href="">Nav 1</a></li> + <li><a href="">Nav 2</a></li> + <li><a href="">Nav 3</a></li> + </ul> + </nav> + <article class="content"><h1>Main article area</h1> + <p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p></article> + <aside class="side">Sidebar</aside> + <div class="ad">Advertising</div> + <footer class="main-footer">The footer</footer> + </div> +</pre> + +<p>I can then set up our grid, as for the example 12-column layout above.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(12, [col-start] 1fr); + grid-gap: 20px; +} +</pre> + +<p>We are once again going to make this a responsive layout, this time however using named lines. Every breakpoint will use a 12-column grid, however the number of tracks that items will span changes depending on the size of the screen.</p> + +<p>We start mobile first, and all we want for the narrowest screens is for the items to remain in source order, and all span right across the grid.</p> + +<pre class="brush: css">.wrapper > * { + grid-column: col-start / span 12; +} +</pre> + +<p>At the next breakpoint we want to move to a two-column layout. Our header and navigation still span the full grid, so we do not need to specify any positioning for them. The sidebar is starting on the first column line named col-start, spanning 3 lines. It goes after row line 3, as the header and navigation are in the first two row tracks.</p> + +<p>The ad panel is below the sidebar, so starts at grid row line 4. Then we have the content and footer starting at col-start 4 and spanning 9 tracks taking them to the end of the grid.</p> + +<pre class="brush: css">@media (min-width: 500px) { + + .side { + grid-column: col-start / span 3; + grid-row: 3; + } + .ad { + grid-column: col-start / span 3; + grid-row: 4; + } + .content, .main-footer { + grid-column: col-start 4 / span 9; + } + nav ul { + display: flex; + justify-content: space-between; + } +} +</pre> + +<p>Finally we go to the three-column version of this layout. The header continues to span right across the grid, but now the navigation moves down to become the first sidebar, with the content and then the sidebar next to it. The footer now also spans across the full layout.</p> + +<pre class="brush: css">@media (min-width: 700px) { + .main-nav { + grid-column: col-start / span 2; + grid-row: 2 / 4; + } + .content { + grid-column: col-start 3 / span 8; + grid-row: 2 / 4; + } + .side { + grid-column: col-start 11 / span 2; + grid-row: 2; + } + .ad { + grid-column: col-start 11 / span 2; + grid-row: 3; + } + .main-footer { + grid-column: col-start / span 12; + } + nav ul { + flex-direction: column; + } +} +</pre> + +<p>{{ EmbedLiveSample('layout_3', '800', '450') }}</p> +</div> + +<p>Once again the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> is useful to help us see how our layout has taken shape.</p> + +<p><img alt="Showing the layout with grid tracks highlighted by the grid inspector." src="https://mdn.mozillademos.org/files/14755/11-grid-inspector-12col-layout.png" style="height: 614px; width: 2050px;"></p> + +<p>Something to note as we create this layout is that we haven’t needed to explicitly position every element on the grid at each breakpoint. We have been able to inherit the placement set up for earlier breakpoints – an advantage of working “mobile first”. We are also able to take advantage of grid auto-placement. By keeping elements in a logical order, auto-placement does quite a lot of work for us in placing items onto the grid. In the final example in this guide we will create a layout that entirely relies on auto-placement.</p> + +<h2 id="A_product_listing_with_auto-placement">A product listing with auto-placement</h2> + +<p>Many layouts are essentially sets of “cards” – product listings, image galleries, and so on. A grid can make it very easy to create these listings in a way that is responsive without needing to add <a href="/en-US/docs/Web/CSS/Media_Queries">media queries</a> to make it so. In this next example I’m combining CSS Grid and Flexbox Layouts to make a simple product listing layout.</p> + +<p>The markup for my listing is an unordered list of items. Each item contains a heading, some text of varying height, and a call to action link.</p> + +<div id="layout_4"> +<pre class="brush: html"><ul class="listing"> + <li> + <h2>Item One</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li> + <h2>Item Two</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li class="wide"> + <h2>Item Three</h2> + <div class="body"><p>The content of this listing item goes here.</p> + <p>This one has more text than the other items.</p> + <p>Quite a lot more</p> + <p>Perhaps we could do something different with it?</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li> + <h2>Item Four</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li> + <h2>Item Five</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> +</ul> +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + img {max-width: 100%; display: block;} + body { + font: 1.2em Helvetica, arial, sans-serif; + } + a:link, a:visited { + text-decoration: none; + color: #f08c00; + } + + h2 { + background-color: #f08c00; + color: #fff; + text-align: center; + margin: 0; + padding: 20px; + } +</pre> +</div> + +<p>We are going to create a grid with a flexible number of flexible columns. I want them never to become smaller than 200 pixels, and then to share any available remaining space equally – so we always get equal width column tracks. We achieve this with the <code>minmax()</code> function in our repeat notation for track sizing.</p> + +<pre class="brush: css">.listing { + list-style: none; + margin: 2em; + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); +} +</pre> + +<p>As soon as I add this CSS, the items start to lay out as a grid. If I make the window smaller or wider the number of column tracks changes – without me needing to add breakpoints using media queries and redefine the grid.</p> + +<p>I can then tidy up the internals of the boxes using a little touch of flexbox. I set the list item to <code>display: flex</code> and the <code>flex-direction</code> to <code>column</code>. I can then use an auto margin on the <code>.cta</code> to push this bar down to the bottom of the box.</p> + +<pre class="brush: css">.listing li { + border: 1px solid #ffe066; + border-radius: 5px; + display: flex; + flex-direction: column; +} +.listing .cta { + margin-top: auto; + border-top: 1px solid #ffe066; + padding: 10px; + text-align: center; +} +.listing .body { + padding: 10px; +} +</pre> + +<p>This is really one of the key reasons I would use flexbox rather than grid, if I am just aligning or distributing something in a single dimension, that’s a flexbox use case. </p> + +<p>{{ EmbedLiveSample('layout_4', '800', '900') }}</p> +</div> + +<p>This is all looking fairly complete now, however we sometimes have these cards which contain far more content than the others. It might be nice to cause those to span two tracks, and then they won’t be so tall. I have a class of <code>wide</code> on my larger item, and I add a rule {{cssxref("grid-column-end")}} with a value of <code>span 2</code>. Now when grid encounters this item, it will assign it two tracks. At some breakpoints, this means that we'll get a gap in the grid – where there isn’t space to lay out a two-track item.</p> + +<p><img alt="The layout has gaps as there is not space to layout a two track item." src="https://mdn.mozillademos.org/files/14751/11-grid-auto-flow-sparse.png" style="height: 812px; width: 800px;"></p> + +<p>I can cause a grid to backfill those gaps by setting {{cssxref("grid-auto-flow")}}<code>: dense </code> on the grid container. Take care when doing this however as it does take items away from their logical source order. You should only do this if your items do not have a set order – and be aware of the <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility#Visual_not_logical_re-ordering">issues</a> of the tab order following the source and not your reordered display.</p> + +<div id="layout_5"> +<div class="hidden"> +<pre class="brush: html"><ul class="listing"> + <li> + <h2>Item One</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li> + <h2>Item Two</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li class="wide"> + <h2>Item Three</h2> + <div class="body"><p>The content of this listing item goes here.</p> + <p>This one has more text than the other items.</p> + <p>Quite a lot more</p> + <p>Perhaps we could do something different with it?</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li> + <h2>Item Four</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li> + <h2>Item Five</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> +</ul> +</pre> + +<pre class="brush: css">* {box-sizing: border-box;} + img {max-width: 100%; display: block;} + body { + font: 1.2em Helvetica, arial, sans-serif; + } + a:link, a:visited { + text-decoration: none; + color: #f08c00; + } + + h2 { + background-color: #f08c00; + color: #fff; + text-align: center; + margin: 0; + padding: 20px; + } + +.listing li { + border: 1px solid #ffe066; + border-radius: 5px; + display: flex; + flex-direction: column; +} +.listing .cta { + margin-top: auto; + border-top: 1px solid #ffe066; + padding: 10px; + text-align: center; +} +.listing .body { + padding: 10px; +} +</pre> +</div> + +<pre class="brush: css">.listing { + list-style: none; + margin: 2em; + display: grid; + grid-gap: 20px; + grid-auto-flow: dense; + grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); +} +.listing .wide { + grid-column-end: span 2; +} +</pre> + +<p>{{ EmbedLiveSample('layout_5', '800', '900') }}</p> + +<p>This technique of using auto-placement with some rules applied to certain items is very useful, and can help you to deal with content that is being output by a CMS for example, where you have repeated items and can perhaps add a class to certain ones as they are rendered into the HTML.</p> +</div> + +<h2 id="Further_exploration">Further exploration</h2> + +<p>The best way to learn to use grid layout is to continue to build examples like the ones we have covered here. Pick something that you normally build using your framework of choice, or using floats, and see if you can build it using grid. Don’t forget to find examples that are impossible to build with current methods. That might mean taking inspiration from magazines or other non-web sources. Grid Layout opens up possibilities that we have not had before, we don’t need to be tied to the same old layouts to use it.</p> + +<ul> + <li>For inspiration see the <a href="http://labs.jensimmons.com/"><em>Layout Labs</em> from Jen Simmons</a>, she has been creating layouts based on a range of sources.</li> + <li>For additional common layout patterns see <em><a href="http://gridbyexample.com">Grid by Example</a></em>, where there are many smaller examples of grid layout and also some larger UI patterns and full page layouts.</li> +</ul> + +<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> |