# Lesson 4: CSS Grid
## An Example of Grid vs Flexbox
To use CSS Grid set the `display` property of the container element to `grid`.
```css
.container {
display: grid;
}
```
### Recap
CSS Grid v. Flexbox
* Grid is two dimensional, while Flex is one
* **Grid is layout first, while Flexbox is content first**
* Flex is for components of an app, Grid is for the app layout itself
CSS Grid does not replace Flexbox. Each can achieve things that the other is not capable of, and in fact, a true master can use Flexbox and CSS Grid together in harmony to create the ultimate webpage layout.
At the highest level CSS Grid excels at creating layouts for a webpage, while Flexbox is a master of content flow for each element that makes up the page layout.
## Rows & Columns
After setting the display property of your container div to grid, the next step is to set the rows and columns in your grid which can be done with the CSS properties:
* `grid-template-columns`
* `grid-template-rows`
And to define gutters between rows and columns you can use the property `grid-gap` on the parent container that has the `display` property set to `grid`.
### Rows & Columns in Action
```css
grid-template-columns: 60px 60px;
grid-template-rows: 160px 60px;
```
利用grid-template-columns和grid-template-rows來定義切割的空間。
```css
.container{
display: grid;
grid-template-columns: 160px 200px;
}
```
範例：Add a `grid` to the `container` in `index.html`. In creating the `grid`, use a number of columns and/or rows that changes the default layout.
```css
Exercise 1
Space 1
Space 2
Space 3
Space 4
Space 5
```
### [Grid visualizer and generator](https://cssgrid-generator.netlify.com/)
Generated code:
```css
.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.div1 { grid-area: 2 / 2 / 5 / 4; }
```
```css
```
### Reference
1. [Basic Concepts of grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
2. [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
3. [An Introduction to the \`fr\` CSS unit](https://css-tricks.com/introduction-fr-css-unit/)
4. [CSS Grid Layout: The Fr Unit](https://alligator.io/css/css-grid-layout-fr-unit/) (fr = fraction)
## Grid Areas
空間切割完了之後，就可以利用座標的方式來指定位置。
The `grid-area` property specifies a particular area or set of rows and columns that a grid item occupies. It is applied to the grid item itself with CSS. Here is an example:
### Grid Tracks
定義區塊為兩條線之間的區域
We define rows and columns on our grid with the [`grid-template-columns`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) and [`grid-template-rows`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows) properties. These define grid tracks. A *grid track* is the space between any two lines on the grid.
### Grid lines
線的定義
```css
.item{
/* row start/column start/ row end/ column end */
grid-area: 1/2/3/3
}
```
Because`grid-area` is shorthand for the properties: `grid-row-start`, `grid-column-start`, `grid-row-end` and `grid-column-end`, the code above places the item from rows 1-3, and columns 2-3.
空間切割完了之後，也可以給空間名稱來指定位置。
Named grid space(Named spaces)
```css
grid-template-areas:
"top top"
"bottomLeft bottomRight";
```
```css
.container {
display:grid;
grid-template-columns: 300px 300px 300px;
grid-template-rows: 250px 600px;
grid-template-areas:
"hd hd hd hd hd hd hd hd"
"sd sd sd main main main main main"
"ft ft ft ft ft ft ft ft";
}
```
```css
.header {
grid-area: hd;
}
```
```css
Exercise 1
```
* Track listings with `repeat()` notation
* Track sizing and `minmax()`
```css
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 250px;
grid-auto-rows: minmax(100px, auto);
```
### Further Research
For even more control over how your content is laid out, check out this article titled [How Items Flow Into a CSS Grid](https://gedd.ski/post/grid-item-placement/).
* [Creating complex Grid layouts](https://rachelandrew.co.uk/archives/2015/02/04/css-grid-layout-creating-complex-grids/)
* [Nesting & overlapping of Grid items](https://gridbyexample.com/examples/example21/)
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://owen31302.gitbook.io/github-education/become-a-front-end-web-developer-or-udacity-3.-javascript-and-the-dom/2.-css-website-layout-website-components/lesson-4-css-grid.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.