diff options
Diffstat (limited to 'files/vi/web/css/css_grid_layout')
| -rw-r--r-- | files/vi/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html | 764 | ||||
| -rw-r--r-- | files/vi/web/css/css_grid_layout/index.html | 243 |
2 files changed, 0 insertions, 1007 deletions
diff --git a/files/vi/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/vi/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html deleted file mode 100644 index 07473396c2..0000000000 --- a/files/vi/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ /dev/null @@ -1,764 +0,0 @@ ---- -title: Tổng quan về Bố cục Lưới -slug: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout -tags: - - ok -translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout -original_slug: Web/CSS/CSS_Grid_Layout/tong_quan_ve_grid_layout ---- -<p><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Bố cục Lưới CSS</a> đưa vào CSS một hệ thống lưới hai chiều. Các lưới có thể dùng để bố cục những vùng lớn trong trang hoặc những thành phần giao diện người dùng nhỏ. Bài viết này giới thiệu Bố cục Lưới CSS và hệ thống thuật ngữ nằm trong chi tiết kỹ thuật của Bố cục Lưới CSS Cấp 1. Những đặc trưng được thể hiện trong tổng quan này sẽ được giải thích chi tiết hơn trong phần còn lại của hướng dẫn.</p> - -<h2 id="Lưới_là_gì">Lưới là gì?</h2> - -<p>Một lưới là một tổ hợp của những đường ngang và dọc cắt nhau - một nhóm xác định các cột và nhóm kia xác định các hàng. Các phần tử có thể được đặt lên lưới, dựa vào các đường hàng và cột này. Lưới CSS có các đặc trưng sau:</p> - -<h3 id="Kích_thước_đường_ray_cố_định_và_linh_hoạt">Kích thước đường ray cố định và linh hoạt</h3> - -<p>Bạn có thể tạo một lưới có kích thước đường ray cố định - bằng điểm ảnh chẳng hạn. Điều này sẽ đặt lưới vào điểm ảnh xác định khớp với bố cục bạn mong muốn. Bạn cũng có thể tạo một lưới sử dụng kích thước linh hoạt bằng phần trăm hoặc dùng đơn vị mới <code>fr</code> được thiết kế cho mục đích này.</p> - -<h3 id="Sắp_đặt_phần_tử">Sắp đặt phần tử</h3> - -<p>Bạn có thể đặt những phần tử vào những vị trí chính xác trên lưới bằng cách dùng số thứ tự đường, bằng tên hoặc trỏ vào một khu vực của lưới. Lưới có bao gồm một thuật toán để điều khiển việc sắp đặt các phần tử không có vị trí rõ ràng trên lưới.</p> - -<h3 id="Creation_of_additional_tracks_to_hold_content">Creation of additional tracks to hold content</h3> - -<p>You can define an explicit grid with grid layout but the specification also deals with the content added outside of a declared grid, which adds additional rows and columns when needed. Features such as adding “as many columns that will fit into a container” are included.</p> - -<h3 id="Alignment_control">Alignment control</h3> - -<p>Grid contains alignment features so that we can control how the items align once placed into a grid area, and how the entire grid is aligned. </p> - -<h3 id="Control_of_overlapping_content">Control of overlapping content</h3> - -<p>More than one item can be placed into a grid cell or area, they can partially overlap each other. This layering may then be controlled with {{cssxref("z-index")}} property.</p> - -<p>Grid is a powerful specification and when combined with other parts of CSS such as <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a>, can help you to create layouts that were previously impossible to build in CSS. It all starts by creating a grid in your <strong>grid container</strong>.</p> - -<h2 id="The_Grid_container">The Grid container</h2> - -<p>We create a <em>grid container</em> by declaring <code>display: grid</code> or <code>display: inline-grid</code> on an element. As soon as we do this all <em>direct children</em> of that element will become <em>grid items</em>.</p> - -<p>In this example, I have a containing div with a class of wrapper, inside are five child elements.</p> - -<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>I make the <code>.wrapper</code> a grid container.</p> - -<pre class="brush: css">.wrapper { - display: grid; -} -</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; -} - -.nested { - border: 2px solid #ffec99; - border-radius: 5px; - background-color: #fff9db; - padding: 1em; -} -</pre> -</div> - -<p>{{ EmbedLiveSample('The_Grid_container', '200', '330') }}</p> - -<p>All the direct children are now grid items. In a web browser, you won’t see any difference to how these items are displayed before turning them into a grid, as grid has created a single column grid for the items. At this point, you may find it useful to work in Firefox Developer Edition, which has the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> available as part of the Developer Tools. If you view this example in Firefox and inspect the grid, you will see a small icon next to the value <code>grid</code>. Click this and then the grid on this element will be overlaid in the browser window.</p> - -<p><img alt="Using the Grid Highlighter in DevTools to view a grid" src="https://mdn.mozillademos.org/files/14631/1-grid-inspector.png" style="height: 753px; width: 900px;"></p> - -<p>As you learn and then work with the CSS Grid Layout this tool will give you a better idea of what is happening with your grids visually.</p> - -<p>If we want to start making this more grid-like we need to add column tracks.</p> - -<h2 id="Grid_Tracks">Grid Tracks</h2> - -<p>We define rows and columns on our grid with the {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}} properties. These define grid tracks. A <em>grid track</em> is the space between any two lines on the grid. In the below image you can see a track highlighted – this is the first row track in our grid.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14637/1_Grid_Track.png" style="height: 261px; width: 392px;"></p> - -<p>I can add to our earlier example by adding the <code>grid-template-columns</code> property, then defining the size of the column tracks.</p> - -<p>I have now created a grid with three 200-pixel-wide column tracks. The child items will be laid out on this grid one in each grid cell.</p> - -<div id="grid_first"> -<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: 200px 200px 200px; -} -</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; -} - -.nested { - border: 2px solid #ffec99; - border-radius: 5px; - background-color: #fff9db; - padding: 1em; -} -</pre> -</div> - -<p>{{ EmbedLiveSample('grid_first', '610', '140') }}</p> -</div> - -<h3 id="The_fr_Unit">The fr Unit</h3> - -<p>Tracks can be defined using any length unit. Grid also introduces an additional length unit to help us create flexible grid tracks. The new <code>fr</code> unit represents a fraction of the available space in the grid container. The next grid definition would create three equal width tracks that grow and shrink according to the available space.</p> - -<div id="fr_unit_ls"> -<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: 1fr 1fr 1fr; -} -</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; -} - -.nested { - border: 2px solid #ffec99; - border-radius: 5px; - background-color: #fff9db; - padding: 1em; -} -</pre> -</div> - -<p>{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}</p> -</div> - -<p>In this next example, we create a definition with a <code>2fr</code> track then two <code>1fr</code> tracks. The available space is split into four. Two parts are given to the first track and one part each to the next two tracks.</p> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: 2fr 1fr 1fr; -} -</pre> - -<p>In this final example, we mix absolute sized tracks with fraction units. The first track is 500 pixels, so the fixed width is taken away from the available space. The remaining space is divided into three and assigned in proportion to the two flexible tracks.</p> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: 500px 1fr 2fr; -} -</pre> - -<h3 id="Track_listings_with_repeat()_notation">Track listings with <code>repeat()</code> notation</h3> - -<p>Large grids with many tracks can use the <code>repeat()</code> notation, to repeat all or a section of the track listing. For example the grid definition:</p> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: 1fr 1fr 1fr; -} -</pre> - -<p>Can also be written as:</p> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); -} -</pre> - -<p>Repeat notation can be used for a part of the track listing. In this next example I have created a grid with an initial 20-pixel track, then a repeating section of 6 <code>1fr</code> tracks then a final 20-pixel track.</p> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: 20px repeat(6, 1fr) 20px; -} -</pre> - -<p>Repeat notation takes the track listing, and uses it to create a repeating pattern of tracks. In this next example, my grid will consist of 10 tracks, a <code>1fr</code> track, and then followed by a <code>2fr</code> track. This pattern will be repeated five times.</p> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(5, 1fr 2fr); -} -</pre> - -<h3 id="The_implicit_and_explicit_grid">The implicit and explicit grid</h3> - -<p>When creating our example grid we defined our column tracks with the {{cssxref("grid-template-columns")}} property, but in addition let the grid create rows it needed for any other content. These rows are created in the implicit grid. The explicit grid consists of the rows and columns you define with {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}}. If you place something outside of that defined grid, or due to the amount of content more grid tracks are needed, then the grid creates rows and columns in the implicit grid. These tracks will be auto-sized by default, resulting in their size being based on the content that is inside them.</p> - -<p>You can also define a set size for tracks created in the implicit grid with the {{cssxref("grid-auto-rows")}} and {{cssxref("grid-auto-columns")}} properties.</p> - -<p>In the below example we use <code>grid-auto-rows</code> to ensure that tracks created in the implicit grid are 200 pixels tall.</p> - -<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-auto-rows: 200px; -} -</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; -} - -.nested { - border: 2px solid #ffec99; - border-radius: 5px; - background-color: #fff9db; - padding: 1em; -} -</pre> -</div> - -<p>{{ EmbedLiveSample('The_implicit_and_explicit_grid', '230', '420') }}</p> - -<h3 id="Track_sizing_and_minmax()">Track sizing and <code>minmax()</code></h3> - -<p>When setting up an explicit grid or defining the sizing for automatically created rows or columns we may want to give tracks a minimum size, but also ensure they expand to fit any content that is added. For example, I may want my rows to never collapse smaller than 100 pixels, but if my content stretches to 300 pixels in height, then I would like the row to stretch to that height.</p> - -<p>Grid has a solution for this with the {{cssxref("minmax", "minmax()")}} function. In this next example I am using <code>minmax()</code> in the value of {{cssxref("grid-auto-rows")}}. This means automatically created rows will be a minimum of 100 pixels tall, and a maximum of <code>auto</code>. Using <code>auto</code> means that the size will look at the content size and will stretch to give space for the tallest item in a cell, in this row.</p> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-auto-rows: minmax(100px, auto); -} -</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; -} - -.nested { - border: 2px solid #ffec99; - border-radius: 5px; - background-color: #fff9db; - padding: 1em; -} -</pre> -</div> - -<pre class="brush: html"><div class="wrapper"> - <div>One</div> - <div>Two - <p>I have some more content in.</p> - <p>This makes me taller than 100 pixels.</p> - </div> - <div>Three</div> - <div>Four</div> - <div>Five</div> -</div> -</pre> - -<p>{{ EmbedLiveSample('Track_sizing_and_minmax()', '240', '470') }}</p> - -<h2 id="Grid_Lines">Grid Lines</h2> - -<p>It should be noted that when we define a grid we define the grid tracks, not the lines. Grid then gives us numbered lines to use when positioning items. In our three column, two row grid we have four column lines.</p> - -<p><img alt="Diagram showing numbered grid lines." src="https://mdn.mozillademos.org/files/14761/1_diagram_numbered_grid_lines.png" style="height: 456px; width: 764px;"></p> - -<p>Lines are numbered according to the writing mode of the document. In a left-to-right language, line 1 is on the left-hand side of the grid. In a right-to-left language, it is on the right-hand side of the grid. Lines can also be named, and we will look at how to do this in a later guide in this series.</p> - -<h3 id="Positioning_items_against_lines">Positioning items against lines</h3> - -<p>We will be exploring line based placement in full detail in a later article. The following example demonstrates doing this in a simple way. When placing an item, we target the line – rather than the track.</p> - -<p>In the following example I am placing the first two items on our three column track grid, using the {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} and {{cssxref("grid-row-end")}} properties. Working from left to right, the first item is placed against column line 1, and spans to column line 4, which in our case is the far-right line on the grid. It begins at row line 1 and ends at row line 3, therefore spanning two row tracks.</p> - -<p>The second item starts on grid column line 1, and spans one track. This is the default so I do not need to specify the end line. It also spans two row tracks from row line 3 to row line 5. The other items will place themselves into empty spaces on the grid.</p> - -<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 class="box5">Five</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-auto-rows: 100px; -} - -.box1 { - grid-column-start: 1; - grid-column-end: 4; - grid-row-start: 1; - grid-row-end: 3; -} - -.box2 { - grid-column-start: 1; - grid-row-start: 3; - grid-row-end: 5; -} -</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; -} - -.nested { - border: 2px solid #ffec99; - border-radius: 5px; - background-color: #fff9db; - padding: 1em; -} -</pre> -</div> - -<p>{{ EmbedLiveSample('Positioning_items_against_lines', '230', '420') }}</p> - -<p>Don't forget that you can use the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> in Firefox Developer Tools to see how the items are positioned against the lines of the grid.</p> - -<h2 id="Grid_Cells">Grid Cells</h2> - -<p>A <em>grid cell</em> is the smallest unit on a grid. Conceptually it is like a table cell. As we saw in our earlier examples, once a grid is defined as a parent the child items will lay themselves out in one cell each of the defined grid. In the below image, I have highlighted the first cell of the grid.</p> - -<p><img alt="The first cell of the grid highlighted" src="https://mdn.mozillademos.org/files/14643/1_Grid_Cell.png" style="height: 233px; width: 350px;"></p> - -<h2 id="Grid_Areas">Grid Areas</h2> - -<p>Items can span one or more cells both by row or by column, and this creates a <em>grid area</em>. Grid areas must be rectangular – it isn’t possible to create an L-shaped area for example. The highlighted grid area spans two row and two column tracks.</p> - -<p><img alt="A grid area" src="https://mdn.mozillademos.org/files/14645/1_Grid_Area.png" style="height: 238px; width: 357px;"></p> - -<h2 id="Gutters">Gutters</h2> - -<p><em>Gutters</em> or <em>alleys</em> between grid cells can be created using the {{cssxref("grid-column-gap")}} and {{cssxref("grid-row-gap")}} properties, or the shorthand {{cssxref("grid-gap")}}. In the below example, I am creating a 10-pixel gap between columns and a <code>1em</code> gap between rows.</p> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-column-gap: 10px; - grid-row-gap: 1em; -} -</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> - -<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; -} - -.nested { - border: 2px solid #ffec99; - border-radius: 5px; - background-color: #fff9db; - padding: 1em; -} -</pre> -</div> - -<p>{{ EmbedLiveSample('Gutters') }}</p> - -<p>Any space used by gaps will be accounted for before space is assigned to the flexible length <code>fr</code> tracks, and gaps act for sizing purposes like a regular grid track, however you cannot place anything into a gap. In terms of line-based positioning, the gap acts like a fat line.</p> - -<h2 id="Nesting_grids">Nesting grids</h2> - -<p>A grid item can become a grid container. In the following example, I have the three-column grid that I created earlier, with our two positioned items. In this case the first item has some sub-items. As these items are not direct children of the grid they do not participate in grid layout and so display in a normal document flow.</p> - -<div id="nesting"> -<pre class="brush: html"><div class="wrapper"> - <div class="box box1"> - <div class="nested">a</div> - <div class="nested">b</div> - <div class="nested">c</div> - </div> - <div class="box box2">Two</div> - <div class="box box3">Three</div> - <div class="box box4">Four</div> - <div class="box box5">Five</div> -</div> -</pre> - -<p><img alt="Nested grid in flow" src="https://mdn.mozillademos.org/files/14641/1_Nested_Grids_in_flow.png" style="height: 512px; width: 900px;"></p> - -<p>If I set <code>box1</code> to <code>display: grid</code> I can give it a track definition and it too will become a grid. The items then lay out on this new grid.</p> - -<pre class="brush: css">.box1 { - grid-column-start: 1; - grid-column-end: 4; - grid-row-start: 1; - grid-row-end: 3; - display: grid; - grid-template-columns: repeat(3, 1fr); -} -</pre> - -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.box { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} - -.nested { - border: 2px solid #ffec99; - border-radius: 5px; - background-color: #fff9db; - padding: 1em; -} -</pre> -</div> -</div> - -<p>{{ EmbedLiveSample('nesting', '600', '340') }}</p> - -<p>In this case the nested grid has no relationship to the parent. As you can see in the example it has not inherited the {{cssxref("grid-gap")}} of the parent and the lines in the nested grid do not align to the lines in the parent grid.</p> - -<h3 id="Subgrid">Subgrid</h3> - -<p>In the level 1 grid specification there is a feature called <em>subgrid</em> which would let us create nested grids that use the track definition of the parent grid.</p> - -<div class="note"> -<p>Subgrids are not yet implemented in any browsers, and the specification is subject to change.</p> -</div> - -<p>In the current specification, we would edit the above nested grid example to use <code>display: subgrid</code> rather than <code>display: grid</code>, then remove the track definition. The nested grid will use the parent grid tracks to layout items.</p> - -<p>It should be noted that the nested grid is in both dimensions—rows and columns. There is no concept of the implicit grid working with subgrids. This means you need to ensure that the parent grid has enough row and column tracks for all the subitems.</p> - -<pre class="brush: css">.box1 { - grid-column-start: 1; - grid-column-end: 4; - grid-row-start: 1; - grid-row-end: 3; - display: subgrid; -} -</pre> - -<h2 id="Layering_items_with_z-index">Layering items with <code>z-index</code></h2> - -<p>Grid items can occupy the same cell. If we return to our example with items positioned by line number, we can change this to make two items overlap.</p> - -<div id="l_ex"> -<pre class="brush: html"><div class="wrapper"> - <div class="box box1">One</div> - <div class="box box2">Two</div> - <div class="box box3">Three</div> - <div class="box box4">Four</div> - <div class="box box5">Five</div> -</div> -</pre> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-auto-rows: 100px; -} - -.box1 { - grid-column-start: 1; - grid-column-end: 4; - grid-row-start: 1; - grid-row-end: 3; -} - -.box2 { - grid-column-start: 1; - grid-row-start: 2; - grid-row-end: 4; -} -</pre> - -<div class="hidden"> -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.box { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} - -.nested { - border: 2px solid #ffec99; - border-radius: 5px; - background-color: #fff9db; - padding: 1em; -} -</pre> -</div> -</div> - -<p>{{ EmbedLiveSample('l_ex', '230', '420') }}</p> - -<p>The item <code>box2</code> is now overlapping <code>box1</code>, it displays on top as it comes later in the source order.</p> - -<h3 id="Controlling_the_order">Controlling the order</h3> - -<p>We can control the order in which items stack up by using the <code>z-index</code> property - just like positioned items. If we give <code>box2</code> a lower <code>z-index</code> than <code>box1</code> it will display below <code>box1</code> in the stack.</p> - -<pre class="brush: css">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-auto-rows: 100px; -} - -.box1 { - grid-column-start: 1; - grid-column-end: 4; - grid-row-start: 1; - grid-row-end: 3; - z-index: 2; -} - -.box2 { - grid-column-start: 1; - grid-row-start: 2; - grid-row-end: 4; - z-index: 1; -} -</pre> - -<div class="hidden"> -<pre class="brush: html"><div class="wrapper"> - <div class="box box1">One</div> - <div class="box box2">Two</div> - <div class="box box3">Three</div> - <div class="box box4">Four</div> - <div class="box box5">Five</div> -</div> -</pre> - -<pre class="brush: css">* {box-sizing: border-box;} - -.wrapper { - border: 2px solid #f76707; - border-radius: 5px; - background-color: #fff4e6; -} - -.box { - border: 2px solid #ffa94d; - border-radius: 5px; - background-color: #ffd8a8; - padding: 1em; - color: #d9480f; -} - -.nested { - border: 2px solid #ffec99; - border-radius: 5px; - background-color: #fff9db; - padding: 1em; -} -</pre> -</div> - -<p>{{ EmbedLiveSample('Controlling_the_order', '230', '420') }}</p> - -<h2 id="Next_Steps">Next Steps</h2> - -<p>In this article we have had a very quick look through the Grid Layout Specification. Have a play with the code examples, and then move onto <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">the next part of this guide where we will really start to dig into the detail of CSS Grid Layout</a>.</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"><strong>Bố cục Lưới CSS</strong></a></li> - <li data-default-state="open"><a href="#"><strong>Các hướng dẫn</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/vi/web/css/css_grid_layout/index.html b/files/vi/web/css/css_grid_layout/index.html deleted file mode 100644 index 9869d6b999..0000000000 --- a/files/vi/web/css/css_grid_layout/index.html +++ /dev/null @@ -1,243 +0,0 @@ ---- -title: CSS Grid Layout -slug: Web/CSS/CSS_Grid_Layout -translation_of: Web/CSS/CSS_Grid_Layout ---- -<p><strong>CSS Grid Layout</strong> chia trang thành các nhiều phần và định hình mối quan hệ giữa các phần dựa trên kích thước, vị trí, và lớp (layer) xây dựng từ HTML nguyên thủy.</p> - -<p>Giống như tables, grid layout cho phép chúng ta sắp xếp các phần thành cột và hàng. Tuy nhiên, đối với nhiều bố cục, việc sử dụng CSS grid sẽ dễ dàng hơn là table. Ví dụ như các phần tử con trong grid có thể chồng chéo lên nhau thành các layer, giống như việc sử dụng cách định hình vị trí của CSS.</p> - -<h2 id="Basic_Example" name="Basic_Example">Ví dụ cơ bản</h2> - -<p>Ví dụ dưới đây sẽ cho bạn thấy một bố cục grid gồm 3 cột có kích thước nhỏ nhất là 100 pixels và kích thước lớn nhất được chỉnh tự động. Các phần được sắp xếp vào grid theo đường thẳng.</p> - -<div id="example"> -<div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} -.wrapper { - max-width: 940px; - margin: 0 auto; -} - -.wrapper > div { - border: 2px solid rgb(233,171,88); - border-radius: 5px; - background-color: rgba(233,171,88,.5); - padding: 1em; - color: #d9480f; -}</pre> -</div> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><div class="wrapper"> - <div class="one">One</div> - <div class="two">Two</div> - <div class="three">Three</div> - <div class="four">Four</div> - <div class="five">Five</div> - <div class="six">Six</div> -</div></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">.wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 10px; - grid-auto-rows: minmax(100px, auto); -} -.one { - grid-column: 1 / 3; - grid-row: 1; -} -.two { - grid-column: 2 / 4; - grid-row: 1 / 3; -} -.three { - grid-column: 1; - grid-row: 2 / 5; -} -.four { - grid-column: 3; - grid-row: 3; -} -.five { - grid-column: 2; - grid-row: 4; -} -.six { - grid-column: 3; - grid-row: 4; -} -</pre> - -<p>{{ EmbedLiveSample('example', '500', '440') }}</p> -</div> - -<h2 id="Liên_quan">Liên quan</h2> - -<h3 id="Thuộc_tính_CSS">Thuộc tính 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="Chức_năng_CSS">Chức năng CSS</h3> - -<div class="index"> -<ul> - <li>{{cssxref("repeat", "repeat()")}}</li> - <li>{{cssxref("minmax", "minmax()")}}</li> - <li>{{cssxref("fit-content", "fit-content()")}}</li> -</ul> -</div> - -<h3 id="Kiểu_dữ_liệu_CSS">Kiểu dữ liệu CSS</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="Chỉ_dẫn">Chỉ dẫn</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="Nguồn_bên_ngoài">Nguồn bên ngoài</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="Đặc_điểm">Đặc điểm</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Grid') }}</td> - <td>{{ Spec2('CSS3 Grid') }}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<section class="Quick_links" id="Quick_Links"> -<ol> - <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> - <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> - <li data-default-state="open"><a href="#"><strong>Guides</strong></a> - <ol> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Properties</strong></a> - <ol> - <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> - <ol> - <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> - <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> - <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> - <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> - <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> - <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> - <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> - <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> - <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> - </ol> - </li> -</ol> -</section> |