row & column 讓人混亂的部分
先說我搞混的部分，以row來說的話，
我腦海中的呈現以下這個圖。
這個圖代表著三列row，
每一個小方格的排列方向是往右
每一個完整的row的新增方向卻是往下
這就是讓我搞混的點了！
所以row到底代表著往右還是往下排列啊啊ㅠㅠ
於是我就針對這個困惑點，思考了一個分辨的方式。
所謂的row和column
row的意思是「列」
column的意思是「欄」
用word的表格當例子來呈現的話就會是這樣
黃色的部分是列，藍色的部分是欄。
就像前面所提到的一樣，
row和column個別的小單位排列方式和新增方向會不一樣！
這也讓這兩個東西在不同應用時，會用不同的方向來思考。
用排列方向和新增方向看row和colunm
接下來我們分為兩個部分來看row和column，
一個是排列方向，一個是新增方向
以一個單位(一列、一欄)的排列方向來看
列是以橫向(左右、x軸方向)排列
欄是以直向(上下、y軸方向)排列
所以當我們在使用Flex屬性的時候，在想要指定版面的排列方向時，
橫向排列會使用row
直向排列會使用column
以設定多個單位(多列、多欄)的新增方向來看
新增列的時候，會往下新增
新增欄的時候，會往右新增
CSS屬性的實際應用
接著來看看～
要怎麼將前面說的兩種不同方向應用在CSS的屬性吧！
首先是Flexbox的部分，
在使用flex的時候，可以利用flex-direction來設定版面item的排序，
item可以想成是整個表格內的一個小方格，
因為這邊主要設定item排序方向，
所以就必須用以一個單位的排序方向來使用。
也就是說在設定flex-direction時，
如果是要橫向排列就使用row
如果是要直向排列就使用column
再來看看Grid的部分，
在使用grid屬性的時候，可以將版面畫上透明的格線，
但是要有多少格子必須自己設定。
(這個時候就更像是在使用word新增表格時，
要設定幾欄幾列的步驟一樣)
因為是要畫一個表格，也就是新增表格的概念，
所以就必須用設定多個單位的新增方向來使用。
也就是說在設定grid-template-rows和grid-template-colums
如果是要往右新增就使用columns
如果是要往下新增就使用row
以上就是row和column怎麼應用的學習紀錄！
用這個方式思考，就不會再搞混了～
那這次的HTML學習紀錄就先到這裡了，掰餔！
