2 篇文章含有標籤「Gap」

檢視所有標籤

使用 CSS Grid 的姿勢

2023年10月14日 · 閱讀時間約 6 分鐘

Imagine Chiu

Front End Engineer @ Bearests

Grid 是一個柵欄系統，你可以把它想像成他是一個 Table，有一些像是 Table 的概念例如合併儲存格行列、直列

與 Flexbox 相比，就是從一維變成了二維，佔比是可由內外部決定，大部分情況是由外部宣告

來看一下語法

先確認一下 CSS Grid 會長什麼樣子

.grid-wrapper{
  display: grid;
  grid-auto-flow: column dense;
  grid-auto-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
}

.grid-wrapper{
 grid-template-areas:
    ". head"
    "nav main"
    ". footer";
}
.header  { grid-area: 1 / 1 / 2 / 4 }
.main    { grid-area: 2 / 1 / 4 / 2 }
.anv { grid-area: 2 / 3 / 5 / 4 }
.footer  { grid-area: 4 / 1 / 5 / 2 }

看起來有點雜，但其實我們主要會用到 grid-template-column、gap

grid-template-column 代表橫列放幾個，並且佔比多少
grid-template-row 代表直列放幾個，並且佔比多少，不過如果我們想要做到 flexbox 那樣自動超出佔比換行，設定為 1fr 即可
gap 內間距，下面會提到

內間距 Gap

在 Grid 中，不使用百分比做網格，而是真的實際的佔用幾塊 (ex: 5fr)，所以不會有 Gap 不被百分比計算的問題 (ex: Flexbox)，這部分對 Grid 來說是相對優勢，因為就不需要在外層使用 Row 負margin 來做抵銷 Col Padding

確認對齊

先測試一下對齊方式，深入你記憶中。

gridAutoFlow: Row

Flex Col

justify-self

Flex Col

Align Item

Align Content

Justify Item

Justify Content

gridAutoFlow: Column

Flex Col

align-self

Flex Col

Align Item

Align Content

Justify Item

Justify Content

為什麼排版是填滿的，明明我的寬度就是設定 auto?

沒錯，這就是 Flexbox 跟 Grid 的對齊特性，在 Normal 的情況下子項目會填滿，如果你不想填滿，那你需要給他對齊模式。

然後我們會發現，他一樣像 Flexbox 一樣，雖然一樣有 Column、Row，但沒有的主軸與交錯線不同的問題，

另外 items 跟 content 的定義也需要明確釐清 (ex: align-items、align-content)

items: 個別項目對齊
content: 內容對齊方式
place-content: 同時設定 align-content 和 justify-content
place-items: 同時設定 align-items 和 justify-items

排列方向

左到右排列，還是上到下排列，類似 flex-direction

Flexbox column 的對齊演示，就是使用這樣的方式，我希望他從上到下超過換行，而不是從左到右超過換行 Sample

.grid-wrapper{
    grid-auto-flow: column;
}

使用元件來做

import {Grid} from '@acrool/react-grid';

<Grid col={3} className="g-4">
    <div>child</div>
    <div>child</div>
    <div>child</div>
</Grid>

這樣代表 grid-auto-columns: repeat(3, 1fr)

Gap 為 var(--bear-gutter-4)

但如果你今天是要做商品列表，你可以指定佔比：

import {Grid, auto} from '@acrool/react-grid';

<Grid col={auto(3)} className="g-3">
    <div>child 1</div>
    <div>child 2</div>
    <div>child 3</div>
    <div>child 4</div>
    <div>child 5</div>
    <div>child 6</div>
</Grid>

這樣就會 3個一列，多出3個自動換行

相關參數可參照 CSS Grid Component

對齊與響應式

如果要對齊，你可以使用公用類樣式：

import {Grid} from '@acrool/react-grid';

<Grid col={3} className="justify-content-start align-content-start g-3"
>
    <div>child 1</div>
    <div>child 2</div>
    <div>child 3</div>
</Grid>

公用類樣式也有提供響應式設定

合併

如果你有合併需求，你可以：

import {Grid} from '@acrool/react-grid';

<Grid col={3} className="g-3">
    <div className="g-col-2">child 1</div>
    <div>child 2</div>
    <div className="g-col-2">child 1</div>
    <div>child 2</div>
</Grid>

響應式

如果你有響應式的需求，你可以：

import {Grid, auto} from '@acrool/react-grid';

<Grid col={1} md={`200px ${auto(2)}`} className="g-3">

    <div className="g-col-md-2">child 1</div>
    <div>child 2</div>
    <div>child 3</div>
    <div>child 4</div>
</Grid>

結論

在常規的時候，我建議直接使用組合技

Layout
- Container(ex: g-?) > Row(ex: g-?) > Col + Utilities CSS
- Container(ex: g-?) > Col + Utilities CSS
- Col + Utilities CSS
Card List in % (不是依卡片本身的寬度)
- Grid + Utilities CSS(ex: g-?)
  
  因為 Flex not use % + gap
Card
- Flex + Utilities CSS(ex: gap-?)
- Grid + Utilities CSS(ex: g-?) (如果Flex不好處理就使用)

例如

import {auto,Flex,Grid} from '@acrool/react-grid';

<Flex className="gap-3">

等同於

<Grid col={auto(2)} className="justify-content-start">

或

<Flex col="column" className="g-3">

等同於

<Grid col={1}>

可以 Flex，就不一定需要 Grid，因為你可能還需要處理對齊的問題來取消自動撐開

而對於複雜樣式的時候，例如一個甘特圖，切分各區塊的命名，那就額外宣告一個 Styled-component 去定義 grid area template 配置

這邊也推薦一個方便製作複雜 Grid 的工具 https://grid.layoutit.com/

Flexbox+Gap替代Grid System?

2023年9月20日 · 閱讀時間約 4 分鐘

Imagine Chiu

Front End Engineer @ Bearests

Flexbox 可以 Gap，直接看來說解決了 Grid System 想做的事情，就是在 Row 使用負數 Margin 將一排中的開頭與結尾的 Col 的 Padding 抵銷

那... 就沒問題了嗎?

我想，如果比較好的話，Bootstrap 5 應該早就改了

我們可以發現，Gap 的長度不會計算包含在 flex item 內 (使用比例去分攤空間的話 25% * 4)，也就是 Gap 會從100% 多出來導致跑版

是可以用一個算法來使用 flex-basis: 0 0 佔比，但是又能夠使用 gap。

<Container>
    <Row style={{'--bear-gutter-x': '20px'} as CSSProperties}>

        <Col col={12}>
            <Row style={{'--bear-gutter-x': '20px'} as CSSProperties}>
                <Col col={8}>Col 1-1</Col>
                <Col col={8}>Col 1-2</Col>
                <Col col={8}>Col 1-3</Col>
            </Row>
        </Col>

        <Col col={12}>
            <Row style={{'--bear-gutter-x': '20px'} as CSSProperties}>
                <Col col={8}>Col 2-1</Col>
                <Col col={8}>Col 2-2</Col>
                <Col col={8}>Col 2-3</Col>
            </Row>
        </Col>

    </Row>
</Container>

Container

Row

Col

Grid System Nest

Col 1

Col 2

Col 1-1

Col 1-2

Col 1-3

Col 2-1

Col 2-2

Col 2-3

Flex + Gap Nest

Col 1

Col 2

Col 1-1

Col 1-2

Col 1-3

Col 2-1

Col 2-2

Col 2-3

<Container>
    <GapRow gap="20px">

        <GapCol col={12}>
            <GapRow gap="20px">
                <GapCol col={8}>Col 1-1</GapCol>
                <GapCol col={8}>Col 1-2</GapCol>
                <GapCol col={8}>Col 1-3</GapCol>
            </GapRow>
        </GapCol>

        <GapCol col={12}>
            <GapRow gap="20px">
                <GapCol col={8}>Col 2-1</GapCol>
                <GapCol col={8}>Col 2-2</GapCol>
                <GapCol col={8}>Col 2-3</GapCol>
            </GapRow>
        </GapCol>

    </GapRow>
</Container>

const totalColumn = 24;

/**
 * 一個Container 幾個子 Col
 * @param colVal
 */

const totalColCount = (colVal: number) => {
    return Math.floor(totalColumn / colVal);
}

/**
 * 一個Col佔比
 * @param colVal
 */
const oneColP = (colVal: number) => {
    return colVal / totalColumn * 100;
}

/**
 * 一個Col佔比
 * @param colVal
 */
const totalGap = (colVal: number) => {
    return totalColCount(colVal) - 1;
}


const GapCol = styled.div<{
    col?: number
}>`
  ${props => css`
    flex: 0 0 calc(${oneColP(props.col)}% - (var(--flex-basic-gap) * (${totalGap(props.col)}) / ${totalColCount(props.col)}));
  `}
`;

const GapRow = styled.div<{
    gap?: string
}>`
    ${props => props.gap && css`
      --flex-basic-gap: ${props.gap};
    `}

    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: var(--flex-basic-gap);
`;

上面是用。Grid System，下面是用 Flex + 計算Gap。看起來是有對齊到，但好像更複雜一點？有點像是為了想 Gap 而 Gap

另一個思考：Bootstrap 5 嵌套 gutter ?

需要注意的一個點，Bootstrap 5 的設計是覆寫 --bs-gutter-x 之後

這樣做有好處是，往往我們是引入很多不同的元件，這樣就不會被影響

在嵌套的下一層不會受到影響，如果需要下面也一樣的話，需要再蓋一次下層，或是從最設定檔中設定，等於是說，gutters 其實是需要的，因為我們會需要在不同尺寸中的網格有不同的 gutter, 並且統一下他們的 gutter，然後根據有些區塊做不同的 gutter

結論

那在哪邊才適合使用 Flex + Gap 呢?

不需要使用佔比來分配容器空間的地方

就是比較常見的使用 mr-? 這種推開的地方

需要網格列表還是乖乖使用 Grid System，或是 Flex + CSS Grid Gap

來看一下語法​

內間距 Gap​

確認對齊​

gridAutoFlow: Row​

gridAutoFlow: Column​

排列方向​

使用元件來做​

對齊 與 響應式​

合併​

響應式​

結論​

另一個思考：Bootstrap 5 嵌套 gutter ?​

結論​

來看一下語法

內間距 Gap

確認對齊

gridAutoFlow: Row

gridAutoFlow: Column

排列方向

使用元件來做

對齊與響應式

合併

響應式

結論

另一個思考：Bootstrap 5 嵌套 gutter ?

結論