diff options
| -rw-r--r-- | files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md (renamed from files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html) | 0 | ||||
| -rw-r--r-- | files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md (renamed from files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html) | 0 | ||||
| -rw-r--r-- | files/ja/web/css/css_grid_layout/grid_template_areas/index.md | 479 | ||||
| -rw-r--r-- | files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html | 495 | ||||
| -rw-r--r-- | files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.md (renamed from files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html) | 0 | ||||
| -rw-r--r-- | files/ja/web/css/css_grid_layout/subgrid/index.md (renamed from files/ja/web/css/css_grid_layout/subgrid/index.html) | 0 |
6 files changed, 479 insertions, 495 deletions
diff --git a/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md index 118bc26766..118bc26766 100644 --- a/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html +++ b/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md diff --git a/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md index 667917d069..667917d069 100644 --- a/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ b/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md diff --git a/files/ja/web/css/css_grid_layout/grid_template_areas/index.md b/files/ja/web/css/css_grid_layout/grid_template_areas/index.md new file mode 100644 index 0000000000..44d9d0874d --- /dev/null +++ b/files/ja/web/css/css_grid_layout/grid_template_areas/index.md @@ -0,0 +1,479 @@ +--- +title: Grid template areas +slug: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas +tags: + - CSS + - CSS Grids + - Guide +--- +{{CSSRef}} + +In the [previous guide](/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) we looked at grid lines, and how to position items against those lines. When you use CSS Grid Layout you always have lines, and this can be a straightforward way to place items on your grid. However, there is an alternate method to use for positioning items on the grid which you can use alone or in combination with line-based placement. This method involves placing our items using named template areas, and we will find out exactly how this method works. You will see very quickly why we sometimes call this the ascii-art method of grid layout! + +## Naming a grid area + +You have already encountered the {{cssxref("grid-area")}} property. This is the property that can take as a value all four of the lines used to position a grid area. + +```css +.box1 { + grid-area: 1 / 1 / 4 / 2; +} +``` + +What we are doing here when defining all four lines, is defining the area by specifying the lines that enclose that area. + + + +We can also define an area by giving it a name and then specify the location of that area in the value of the {{cssxref("grid-template-areas")}} property. You can choose what you would like to name your area. For example, if I wish to create the layout shown below I can identify four main areas. + +- a header +- a footer +- a sidebar +- the main content + + + +With the {{cssxref("grid-area")}} property I can assign each of these areas a name. This will not yet create any layout, but we now have named areas to use in a layout. + +```css +.header { + grid-area: hd; +} +.footer { + grid-area: ft; +} +.content { + grid-area: main; +} +.sidebar { + grid-area: sd; +} +``` + +Having defined these names I then create my layout. This time, instead of placing my items using line numbers specified on the items themselves, I create the whole layout on the grid container. + +```css +.wrapper { + display: grid; + grid-template-columns: repeat(9, 1fr); + grid-auto-rows: minmax(100px, auto); + grid-template-areas: + "hd hd hd hd hd hd hd hd hd" + "sd sd sd main main main main main main" + "ft ft ft ft ft ft ft ft ft"; +} +``` + +```css hidden +* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +``` + +```html +<div class="wrapper"> + <div class="header">Header</div> + <div class="sidebar">Sidebar</div> + <div class="content">Content</div> + <div class="footer">Footer</div> +</div> +``` + +{{ EmbedLiveSample('Naming_a_grid_area', '300', '330') }} + +Using this method we do not need to specify anything at all on the individual grid items, everything happens on our grid container. We can see the layout described as the value of the {{cssxref("grid-template-areas")}} property. + +## Leaving a grid cell empty + +We have completely filled our grid with areas in this example, leaving no white space. However you can leave grid cells empty with this method of layout. To leave a cell empty use the full stop character, '`.`'. If I want to only display the footer directly under the main content I would need to leave the three cells underneath the sidebar empty. + +```css +.header { + grid-area: hd; +} +.footer { + grid-area: ft; +} +.content { + grid-area: main; +} +.sidebar { + grid-area: sd; +} +``` + +```css hidden +* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +``` + +```css +.wrapper { + display: grid; + grid-template-columns: repeat(9, 1fr); + grid-auto-rows: minmax(100px, auto); + grid-template-areas: + "hd hd hd hd hd hd hd hd hd" + "sd sd sd main main main main main main" + ". . . ft ft ft ft ft ft"; +} +``` + +```html +<div class="wrapper"> + <div class="header">Header</div> + <div class="sidebar">Sidebar</div> + <div class="content">Content</div> + <div class="footer">Footer</div> +</div> +``` + +{{ EmbedLiveSample('Leaving_a_grid_cell_empty', '300', '330') }} + +In order to make the layout neater I can use multiple `.` characters. As long as there is no white space between the full stops it will be counted as one cell. For a complex layout there is a benefit to having the rows and columns neatly aligned. It means that you can actually see, right there in the CSS, what this layout looks like. + +## Spanning multiple cells + +In our example each of the areas spans multiple grid cells and we achieve this by repeating the name of that grid area multiple times with white space between. You can add extra white space in order to keep your columns neatly lined up in the value of `grid-template-areas`. You can see that I have done this in order that the `hd` and `ft` line up with `main`. + +The area that you create by chaining the area names must be rectangular, at this point there is no way to create an L-shaped area. The specification does note that a future level might provide this functionality. You can however span rows just as easily as columns. For example we could make our sidebar span down to the end of the footer by replacing the `.` with `sd`. + +```css +.header { + grid-area: hd; +} +.footer { + grid-area: ft; +} +.content { + grid-area: main; +} +.sidebar { + grid-area: sd; +} +``` + +```css hidden +* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +``` + +```css +.wrapper { + display: grid; + grid-template-columns: repeat(9, 1fr); + grid-auto-rows: minmax(100px, auto); + grid-template-areas: + "hd hd hd hd hd hd hd hd hd" + "sd sd sd main main main main main main" + "sd sd sd ft ft ft ft ft ft"; +} +``` + +```html hidden +<div class="wrapper"> + <div class="header">Header</div> + <div class="sidebar">Sidebar</div> + <div class="content">Content</div> + <div class="footer">Footer</div> +</div> +``` + +{{ EmbedLiveSample('Spanning_multiple_cells', '300', '330') }} + +The value of {{cssxref("grid-template-areas")}} must show a complete grid, otherwise it is invalid (and the property is ignored). This means that you must have the same number of cells for each row, if empty with a full stop character demonstrating that the cell is to be left empty. You will also create an invalid grid if your areas are not rectangular. + +## Redefining the grid using media queries + +As our layout is now contained in one part of the CSS, this makes it very easy to make changes at different breakpoints. You can do this by redefining the grid, the position of items on the grid, or both at once. + +When doing this, define the names for your areas outside of any media queries. That way the content area would always be called `main` no matter where on the grid it is placed. + +For our layout above, we might like to have a very simple layout at narrow widths, defining a single column grid and stacking up our items. + +```css hidden +* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +``` + +```css +.header { + grid-area: hd; +} +.footer { + grid-area: ft; +} +.content { + grid-area: main; +} +.sidebar { + grid-area: sd; +} + +.wrapper { + display: grid; + grid-auto-rows: minmax(100px, auto); + grid-template-columns: 1fr; + grid-template-areas: + "hd" + "main" + "sd" + "ft"; +} +``` + +We can then redefine that layout inside media queries to go to our two columns layout, and perhaps take it to a three column layout if the available space is even wider. Note that for the wide layout I keep my nine column track grid, I redefine where items are placed using `grid-template-areas`. + +```css +@media (min-width: 500px) { + .wrapper { + grid-template-columns: repeat(9, 1fr); + grid-template-areas: + "hd hd hd hd hd hd hd hd hd" + "sd sd sd main main main main main main" + "sd sd sd ft ft ft ft ft ft"; + } +} +@media (min-width: 700px) { + .wrapper { + grid-template-areas: + "hd hd hd hd hd hd hd hd hd" + "sd sd main main main main main ft ft"; + } +} +``` + +```html hidden +<div class="wrapper"> + <div class="header">Header</div> + <div class="sidebar">Sidebar</div> + <div class="content">Content</div> + <div class="footer">Footer</div> +</div> +``` + +{{ EmbedLiveSample('Redefining_the_grid_using_media_queries', '550', '330') }} + +## Using `grid-template-areas` for UI elements + +Many of the grid examples you will find online make the assumption that you will use grid for main page layout, however grid can be just as useful for small elements as those larger ones. Using {{cssxref("grid-template-areas")}} can be especially nice as it is easy to see in the code what your element looks like. + +### Media object example + +As a very simple example we can create a “media object”. This is a component with space for an image or other media on one side and content on the other. The image might be displayed on the right or left of the box. + + + +Our grid is a two-column track grid, with the column for the image sized at `1fr` and the text `3fr`. If you wanted a fixed width image area, then you could set the image column as a pixel width, and assign the text area `1fr`. A single column track of `1fr` would then take up the rest of the space. + +We give the image area a grid area name of `img` and the text area `content`, then we can lay those out using the `grid-template-areas` property. + +```css +* {box-sizing: border-box;} + +.media { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + max-width: 400px; +} +.media { + display: grid; + grid-template-columns: 1fr 3fr; + grid-template-areas: "img content"; + margin-bottom: 1em; +} + +.media .image { + grid-area: img; + background-color: #ffd8a8; +} + +.media .text { + grid-area: content; + padding: 10px; + +} +``` + +```html +<div class="media"> + <div class="image"></div> + <div class="text">This is a media object example. + We can use grid-template-areas to switch around the image and text part of the media object. + </div> +</div> +``` + +{{ EmbedLiveSample('Media_object_example', '300', '200') }} + +### Displaying the image on the other side of the box + +We might want to be able to display our box with the image the other way around. To do this, we redefine the grid to put the `1fr` track last, and flip the values in {{cssxref("grid-template-areas")}}. + +```css +* {box-sizing: border-box;} + +.media { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + max-width: 400px; +} +.media { + display: grid; + grid-template-columns: 1fr 3fr; + grid-template-areas: "img content"; + margin-bottom: 1em; +} + +.media.flipped { + grid-template-columns: 3fr 1fr; + grid-template-areas: "content img"; +} + +.media .image { + grid-area: img; + background-color: #ffd8a8; +} + +.media .text { + grid-area: content; + padding: 10px; + +} +``` + +```html +<div class="media flipped"> + <div class="image"></div> + <div class="text">This is a media object example. + We can use grid-template-areas to switch around the image and text part of the media object. + </div> +</div> +``` + +{{ EmbedLiveSample('Displaying_the_image_on_the_other_side_of_the_box', '300', '200') }} + +## Grid definition shorthands + +Having looked at various ways of placing items on our grids and many of the properties used to define grid, this is a good time to take a look at a couple of shorthands that are available for defining the grid and many things about it all in one line of CSS. + +These can quickly become difficult to read for other developers, or even your future self. However they are part of the specification and it is likely you will come across them in examples or in use by other developers, even if you choose not to use them. + +Before using any shorthand it is worth remembering that shorthands not only enable the setting of many properties in one go, they also act to **reset things** to their initial values that you do not, or cannot set in the shorthand. Therefore if you use a shorthand, be aware that it may reset things you have applied elsewhere. + +The two shorthands for the grid container are the Explicit Grid Shorthand `grid-template` and the Grid Definition Shorthand `grid`. + +### `grid-template` + +The {{cssxref("grid-template")}} property sets the following properties: + +- {{cssxref("grid-template-rows")}} +- {{cssxref("grid-template-columns")}} +- {{cssxref("grid-template-areas")}} + +The property is referred to as the Explicit Grid Shorthand because it is setting those things that you control when you define an explicit grid, and not those which impact any implicit row or column tracks that might be created. + +The following code creates a layout using {{cssxref("grid-template")}} that is the same as the layout created earlier in this guide. + +```css +.wrapper { + display: grid; + grid-template: + "hd hd hd hd hd hd hd hd hd" minmax(100px, auto) + "sd sd sd main main main main main main" minmax(100px, auto) + "ft ft ft ft ft ft ft ft ft" minmax(100px, auto) + / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ; +} +``` + +The first value is our `grid-template-areas` value but we also declare the size of the row at the end of each row. This is what the `minmax(100px, auto)` is doing. + +Then after `grid-template-areas` we have a forward slash, after that is an explicit track listing of column tracks. + +### `grid` + +The {{cssxref("grid")}} shorthand goes a step further and also sets properties used by the implicit grid. So you will be setting: + +- {{cssxref("grid-template-rows")}} +- {{cssxref("grid-template-columns")}} +- {{cssxref("grid-template-areas")}} +- {{cssxref("grid-auto-rows")}} +- {{cssxref("grid-auto-columns")}} +- {{cssxref("grid-auto-flow")}} + +You can use this syntax in the exact same way as the {{cssxref("grid-template")}} shorthand, just be aware than when doing so you will reset the other values set by the property. + +```css +.wrapper { + display: grid; + grid: "hd hd hd hd hd hd hd hd hd" minmax(100px, auto) + "sd sd sd main main main main main main" minmax(100px, auto) + "ft ft ft ft ft ft ft ft ft" minmax(100px, auto) + / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ; +} +``` + +We will revisit the other functionality offered by this shorthand later in these guides when we take a look at auto placement and the grid-auto-flow property. + +If you have worked through these initial guides you now should be in a position to create grid layouts using line-based placement or named areas. Take some time to build some common layout patterns using grid, while there are lots of new terms to learn, the syntax is relatively straightforward. As you develop examples, you are likely to come up with some questions and use cases for things we haven't covered yet. In the rest of these guides we will be looking at some more of the detail included in the specification – in order that you can begin to create advanced layouts with it. diff --git a/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html deleted file mode 100644 index 5f67402f98..0000000000 --- a/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html +++ /dev/null @@ -1,495 +0,0 @@ ---- -title: 名前付きグリッド線を使用したレイアウト -slug: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines -tags: - - CSS - - CSS Grids - - Guide -translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines ---- -<p>前のガイドでは、グリッドトラックを定義することによって作られた線に沿ってアイテムを配置する様子と、名前の付いたテンプレート領域を使用してアイテムを配置する方法を見てきました。このガイドでは、名前付きの線を使用したときにこれら2つが共にどのように動作するかを見てみます。線に名前をつけるととても便利ですが、名前とトラックの寸法の組み合わせではもっと難解なグリッドの構文になります。いくつかの例を使ってみることで、動作がより明確かつ易しくなるでしょう。</p> - -<h2 id="Naming_lines_when_defining_a_grid" name="Naming_lines_when_defining_a_grid">グリッドを定義した場合の線の名前付け</h2> - -<p>You can assign some or all of the lines in your grid a name when you define your grid with the <code>grid-template-rows</code> and <code>grid-template-columns</code> properties. To demonstrate I’ll use the simple layout created in the guide on line-based placement. This time I’ll create the grid using named lines.</p> - -<div id="example_named_lines"> -<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> - -<p>When defining the grid, I name my lines inside square brackets. Those names can be anything you like. I have defined a name for the start and end of the container, both for rows and columns. Then defined the centre block of the grid as <code>content-start</code> and <code>content-end</code> again, both for columns and rows although you do not need to name all of the lines on your grid. You might choose to name just some key lines for your layout.</p> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]; - grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end]; -} -</pre> - -<p>Once the lines have names, we can use the name to place the item rather than the line number.</p> - -<pre class="brush: css">.box1 { - grid-column-start: main-start; - grid-row-start: main-start; - grid-row-end: main-end; -} - -.box2 { - grid-column-start: content-end; - grid-row-start: main-start; - grid-row-end: content-end; -} - -.box3 { - grid-column-start: content-start; - grid-row-start: main-start; -} - -.box4 { - grid-column-start: content-start; - grid-column-end: main-end; - grid-row-start: content-end; -} -</pre> - -<pre class="brush: html"><div class="wrapper"> - <div class="box1">One</div> - <div class="box2">Two</div> - <div class="box3">Three</div> - <div class="box4">Four</div> -</div> -</pre> - -<p>{{ EmbedLiveSample('example_named_lines', '500', '330') }}</p> -</div> - -<p>Everything else about line-based placement still works in the same way and you can mix named lines and line numbers. Naming lines is useful when creating a responsive design where you redefine the grid, rather than then needing to redefine the content position by changing the line number in your media queries, you can ensure that the line is always named the same in your definitions.</p> - -<h3 id="Giving_lines_multiple_names" name="Giving_lines_multiple_names">線に複数の名前を付ける</h3> - -<p>You may want to give a line more than one name, perhaps it denotes the sidebar-end and the main-start for example. To do this add the names inside the square brackets with whitespace between them <code>[sidebar-end main-start]</code>. You can then refer to that line by either of the names.</p> - -<h2 id="Implicit_grid_areas_from_named_lines" name="Implicit_grid_areas_from_named_lines">名前付きの行の暗黙的なグリッド領域</h2> - -<p>When naming the lines, I mentioned that you can name these anything you like. The name is a <a href="https://drafts.csswg.org/css-values-4/#custom-idents">custom ident</a>, an author-defined name. When choosing the name you need to avoid words that might appear in the specification and be confusing - such as <code>span</code>. Idents are not quoted.</p> - -<p>While you can choose any name, if you append <code>-start</code> and <code>-end</code> to the lines around an area, as I have in the example above, grid will create you a named area of the main name used. Taking the above example, I have <code>content-start</code> and <code>content-end</code> both for rows and for columns. This means I get a grid area named <code>content</code>, and could place something in that area should I wish to.</p> - -<div id="implicit_areas_from_lines"> -<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> - -<p>I’m using the same grid definitions as above, however this time I am going to place a single item into the named area <code>content</code>.</p> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]; - grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end]; -} -.thing { - grid-area: content; -} -</pre> - -<pre class="brush: html"><div class="wrapper"> - <div class="thing">I am placed in an area named content.</div> -</div> -</pre> - -<p>{{ EmbedLiveSample('implicit_areas_from_lines', '500', '330') }}</p> -</div> - -<p>We don’t need to define where our areas are with <code>grid-template-areas</code> as our named lines have created an area for us.</p> - -<h2 id="Implicit_Grid_lines_from_named_areas" name="Implicit_Grid_lines_from_named_areas">名前付き領域からの暗黙のグリッド線</h2> - -<p>We have seen how named lines create a named area, and this also works in reverse. Named template areas create named lines that you can use to place your items. If we take the layout created in the guide to Grid Template Areas, we can use the lines created by our areas to see how this works.</p> - -<p>In this example I have added an extra div with a class of <code>overlay</code>. We have named areas created using the <code>grid-area</code> property, then a layout created in <code>grid-template-areas</code>. The area names are:</p> - -<ul> - <li><code>hd</code></li> - <li><code>ft</code></li> - <li><code>main</code></li> - <li><code>sd</code></li> -</ul> - -<p>This gives us column and row lines:</p> - -<ul> - <li><code>hd-start</code></li> - <li><code>hd-end</code></li> - <li><code>sd-start</code></li> - <li><code>sd-end</code></li> - <li><code>main-start</code></li> - <li><code>main-end</code></li> - <li><code>ft-start</code></li> - <li><code>ft-end</code></li> -</ul> - -<p>You can see the named lines in the image, note that some lines have two names - for example <code>sd-end</code> and <code>main-start</code> refer to the same column line.</p> - -<p><img alt="An image showing the implicit line names created by our grid areas." src="https://mdn.mozillademos.org/files/14699/5_multiple_lines_from_areas.png" style="height: 396px; width: 1140px;"></p> - -<p>To position <code>overlay</code> using these implicit named lines is the same as positioning an item using lines that we have named.</p> - -<div id="implicit_lines_from_area"> -<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(9, 1fr); - grid-auto-rows: minmax(100px, auto); - grid-template-areas: - "hd hd hd hd hd hd hd hd hd" - "sd sd sd main main main main main main" - "ft ft ft ft ft ft ft ft ft"; -} - -.header { - grid-area: hd; -} - -.footer { - grid-area: ft; -} - -.content { - grid-area: main; -} - -.sidebar { - grid-area: sd; -} - -.wrapper > div.overlay { - z-index: 10; - grid-column: main-start / main-end; - grid-row: hd-start / ft-end; - border: 4px solid rgb(92,148,13); - background-color: rgba(92,148,13,.4); - color: rgb(92,148,13); - font-size: 150%; -} -</pre> - -<pre class="brush: html"><div class="wrapper"> - <div class="header">Header</div> - <div class="sidebar">Sidebar</div> - <div class="content">Content</div> - <div class="footer">Footer</div> - <div class="overlay">Overlay</div> -</div> -</pre> - -<p>{{ EmbedLiveSample('implicit_lines_from_area', '500', '330') }}</p> -</div> - -<p>Given that we have this ability to position create lines from named areas and areas from named lines it is worth taking a little bit of time to plan your naming strategy when starting out creating your grid layout. By selecting names that will make sense to you and your team you will help everyone to use the layouts you create more easily.</p> - -<h2 id="Multiple_lines_with_the_same_name_with_repeat" name="Multiple_lines_with_the_same_name_with_repeat">repeat() による同じ名前を持つ複数の線</h2> - -<p>If you want to give all of the lines in your grid a unique name then you will need to write out the track definition long-hand rather than using the repeat syntax, as you need to add the name in square brackets while defining the tracks. If you do use the repeat syntax you will end up with multiple lines that have the same name, however this can be very useful too.</p> - -<p>In this next example I am creating a grid with twelve equal width columns. Before defining the 1fr size of the column track I am also defining a line name of <code>[col-start]</code>. This means that we will end up with a grid that has 12 column lines all named <code>col-start</code> before a <code>1fr</code> width column.</p> - -<div id="multiple_lines_same_name"> -<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(12, [col-start] 1fr); -}</pre> - -<p>Once you have created the grid you can place items onto it. As we have multiple lines named <code>col-start</code> if you place an item to start after line <code>col-start</code> grid uses the first line named <code>col-start</code>, in our case that will be the far left line. To address another line use the name, plus the number for that line. To place our item from the first line named col-start to the 5th, we can use:</p> - -<pre class="brush: css">.item1 { - grid-column: col-start / col-start 5 -} -</pre> - -<p>You can also use the <code>span</code> keyword here. My next item will be placed from the 7th line named <code>col-start</code> and span 3 lines.</p> - -<pre class="brush: css">.item2 { - grid-column: col-start 7 / span 3; -} -</pre> - -<p class="brush: html"></p> - -<pre class="brush: html"><div class="wrapper"> - <div class="item1">I am placed from col-start line 1 to col-start 5</div> - <div class="item2">I am placed from col-start line 7 spanning 3 lines</div> -</div></pre> - -<p>{{ EmbedLiveSample('multiple_lines_same_name', '500', '330') }}</p> -</div> - -<p>If you take a look at this layout in the Firefox Grid Highlighter you can see how the column lines are shown, and how our items are placed against these lines.</p> - -<p><img alt="The 12 column grid with items placed. The Grid Highlighter shows the position of the lines." src="https://mdn.mozillademos.org/files/14695/5_named_lines1.png" style="height: 156px; width: 1958px;"></p> - -<p>The repeat syntax can also take a track list, it doesn’t just need to be a single track size that is being repeated. The code below would create an eight track grid, with a narrower <code>1fr</code> width column named <code>col1-start</code> followed by a wider <code>3fr</code> column named <code>col2-start</code>.</p> - -<pre class="brush: css">.wrapper { - grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr); -} -</pre> - -<p>If your repeating syntax puts two lines next to each other then they will be merged, and create the same result as giving a line multiple names in a non-repeating track definition. The following definition, creates four <code>1fr</code> tracks, which each have a start and end line.</p> - -<pre class="brush: css">.wrapper { - grid-template-columns: repeat(4, [col-start] 1fr [col-end] ); -} -</pre> - -<p>If we write this definition out without using repeat notation it would look like this.</p> - -<pre class="brush: css">.wrapper { - grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end]; -} -</pre> - -<p>If you have used a track list then you can use the <code>span</code> keyword not just to span a number of lines but also to span a number of lines of a certain name.</p> - -<div id="span_line_number"> -<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(6, [col1-start] 1fr [col2-start] 3fr); -} - -.item1 { - grid-column: col1-start / col2-start 2 -} - -.item2 { - grid-row: 2; - grid-column: col1-start 2 / span 2 col1-start; -} -</pre> - -<pre class="brush: html"><div class="wrapper"> - <div class="item1">I am placed from col1-start line 1 to col2-start line 2</div> - <div class="item2">I am placed from col1-start line 2 spanning 2 lines named col1-start</div> -</div> -</pre> - -<p>{{ EmbedLiveSample('span_line_number', '500', '330') }}</p> -</div> - -<p>Over the last three guides you have discovered that there are a lot of different ways to place items using grid. This can seem a little bit overcomplicated at first, but remember you don’t need to use all of them. In practice I find that for straightforward layouts, using named template areas works well, it gives that nice visual representation of what your layout looks like, and it is then easy to move things around on the grid.</p> - -<p>If working with a strict multiple column layout for example the named lines demonstration in the last part of this guide works very well. If you consider grid systems such as those found in frameworks like Foundation or Bootstrap, these are based on a 12 column grid. The framework then imports the code to do all of the calculations to make sure that the columns add up to 100%. With grid layout the only code we need for our grid “framework” is:</p> - -<div class="three_column"> -<pre class="brush: css">.wrapper { - display: grid; - grid-gap: 10px; - grid-template-columns: repeat(12, [col-start] 1fr); -} -</pre> - -<p>We can then use that framework to layout our page. For example, to create a three column layout with a header and footer, I might have the following markup.</p> - -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.wrapper > * { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <header class="main-header">I am the header</header> - <aside class="side1">I am sidebar 1</aside> - <article class="content">I am the main article</article> - <aside class="side2">I am sidebar 2</aside> - <footer class="main-footer">I am the footer</footer> -</div> -</pre> - -<p>I could then place this on my grid layout framework like this.</p> - -<pre class="brush: css">.main-header, -.main-footer { - grid-column: col-start / span 12; -} - -.side1 { - grid-column: col-start / span 3; - grid-row: 2; -} - -.content { - grid-column: col-start 4 / span 6; - grid-row: 2; -} - -.side2 { - grid-column: col-start 10 / span 3; - grid-row: 2; -} -</pre> - -<p>{{ EmbedLiveSample('three_column', '500', '330') }}</p> - -<p>Once again, the grid highlighter is helpful to show us how the grid we have placed our items on works.</p> - -<p><img alt="The layout with the grid highlighted." src="https://mdn.mozillademos.org/files/14697/5_named_lines2.png" style="height: 378px; width: 1958px;"></p> -</div> - -<p>That’s all I need. I don’t need to do any calculations, grid automatically removed my 10 pixel gutter track before assigning the space to the <code>1fr</code> column tracks. As you start to build out your own layouts, you will find that the syntax becomes more familiar and you choose the ways that work best for you and the type of projects you like to build. Try building some common patterns with these various methods, and you will soon find your most productive way to work. Then, in the next guide we will look at how grid can position items for us - without us needing to use placement properties at all!</p> - -<section id="Quick_links"> -<ol> - <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> - <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li> - <li data-default-state="open"><a href="#"><strong>ガイド</strong></a> - <ol> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">他のレイアウト方法との関連</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">行ベースの配置</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">名前付きグリッド線を使用したレイアウト</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">グリッドレイアウトの自動配置</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトのボックス配置</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">グリッド、論理値、書字方向</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッドレイアウトと進歩的な拡張</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">グリッドを使ったよくあるレイアウトの実現</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>プロパティ</strong></a> - <ol> - <li><a href="/ja/docs/Web/CSS/grid">grid</a></li> - <li><a href="/ja/docs/Web/CSS/grid-area">grid-area</a></li> - <li><a href="/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> - <li><a href="/ja/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> - <li><a href="/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> - <li><a href="/ja/docs/Web/CSS/grid-column">grid-column</a></li> - <li><a href="/ja/docs/Web/CSS/grid-column-end">grid-column-end</a></li> - <li><a href="/ja/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> - <li><a href="/ja/docs/Web/CSS/grid-column-start">grid-column-start</a></li> - <li><a href="/ja/docs/Web/CSS/grid-gap">grid-gap</a></li> - <li><a href="/ja/docs/Web/CSS/grid-row">grid-row</a></li> - <li><a href="/ja/docs/Web/CSS/grid-row-end">grid-row-end</a></li> - <li><a href="/ja/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> - <li><a href="/ja/docs/Web/CSS/grid-row-start">grid-row-start</a></li> - <li><a href="/ja/docs/Web/CSS/grid-template">grid-template</a></li> - <li><a href="/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> - <li><a href="/ja/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> - <li><a href="/ja/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>用語集</strong></a> - <ol> - <li><a href="/ja/docs/Glossary/Grid">グリッド</a></li> - <li><a href="/ja/docs/Glossary/Grid_lines">グリッド線</a></li> - <li><a href="/ja/docs/Glossary/Grid_tracks">グリッドトラック</a></li> - <li><a href="/ja/docs/Glossary/Grid_cell">グリッドセル</a></li> - <li><a href="/ja/docs/Glossary/Grid_areas">グリッド領域</a></li> - <li><a href="/ja/docs/Glossary/Gutters">溝</a></li> - <li><a href="/ja/docs/Glossary/Grid_Axis">グリッド軸</a></li> - <li><a href="/ja/docs/Glossary/Grid_rows">グリッド行</a></li> - <li><a href="/ja/docs/Glossary/Grid_column">グリッド列</a></li> - </ol> - </li> -</ol> -</section> diff --git a/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.md index 476cf929bf..476cf929bf 100644 --- a/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html +++ b/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.md diff --git a/files/ja/web/css/css_grid_layout/subgrid/index.html b/files/ja/web/css/css_grid_layout/subgrid/index.md index 386ce3ca83..386ce3ca83 100644 --- a/files/ja/web/css/css_grid_layout/subgrid/index.html +++ b/files/ja/web/css/css_grid_layout/subgrid/index.md |