2 posts tagged with "Gap"

Grid is a grid system that you can think of as a table. It has concepts similar to a table, such as merging cells, rows, and columns.

Compared to Flexbox, it transitions from a one-dimensional to a two-dimensional layout, with proportions often determined by external declarations in most cases.

Let's take a look at the syntax.​

Let me confirm what CSS Grid looks like first.

.grid-table{
  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;
}

or

.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 }

It may look a bit complex, but in practice, we'll mainly be using grid-template-columns and gap.

• grid-template-columns specifies how many columns and their proportions.
• grid-template-rows specifies how many rows and their proportions. If you want rows to automatically wrap like Flexbox, you can set it to 1fr.
• gap is for the spacing between grid items, which will be explained further below.

Inner Gap​

In Grid, instead of using percentages for grid layout, you specify the actual number of grid tracks an item occupies (e.g., 5fr). This eliminates issues where the gap isn't calculated as a percentage (e.g., as in Flexbox). This aspect is a relative advantage of Grid because you don't need to use negative margins on rows to offset column padding.

Confirm alignment​

Let's test the alignment first, deep into your memory.

gridAutoFlow: Row​

gridAutoFlow: Column​

Then we will notice that it doesn't have the same issues as Flexbox, with different main axes for columns and rows. We can simply treat it as if it's just a row. If you're not familiar with Flexbox, you might wonder why the layout is filling the space even when the width is set to auto？

Yes, this is the alignment feature of Flexbox and Grid. In Normal, the sub-items will fill up. If you don't want to fill them up, then you need to give it an alignment mode.

Then we will find that it is just like Flexbox. Although it still has Column and Row, it does not have the problem of different main axes and intersecting lines.

In addition, the definitions of items and content also need to be clearly clarified (ex: align-items, align-content)

• items: Alignment of individual items
• content: content alignment
• place-content: set align-content and justify-content at the same time
• place-items: set align-items and justify-items at the same time

Using components to accomplish this.​

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

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

This means grid-auto-columns: repeat(3, auto), and in CSS-in-JS, you can use children.count() for general layout purposes. The gap is set to 2px. However, if you are creating a product list today, you can specify proportions.

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>

This way, you will have three items per row, and every three items will automatically wrap to a new line.

For related parameters, you can refer to the CSS Grid Component

Align​

If you want to align, you can use a utilities class style:

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>

Utilities style there are also responsive styles

Direction​

Arrange left to right or top to bottom? like flex-direction

The alignment demonstration of Flexbox column is in this way. I hope that it exceeds the line break from top to bottom, rather than from left to right and exceeds the line break. Sample

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

Merging​

If you have merging requirements or if you want to decide from within, you can:

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

Responsive​

If you have responsive requirements, you can:

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>

In conclusion​

In normal times, I recommend using combo skills directly

• Layout
  • Container(ex: g-?) > Row(ex: g-?) > Col + Utilities CSS
  • Container(ex: g-?) > Col + Utilities CSS
  • Col + Utilities CSS
• Card List in % (not static width by card)
  • Grid + Utilities CSS(ex: g-?)

    因為 Flex 不能使用 % + gap

• Card
  • Flex + Utilities CSS(ex: gap-?)
  • Grid + Utilities CSS(ex: g-?) (Use it if Flex is difficult to handle)

Example

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

<Flex className="gap-3">

Equivalent to

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

Or

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

Equivalent to

<Grid col={1}>

You can use Flex, but you don’t necessarily need Grid, because you may still need to deal with alignment issues to cancel automatic expansion.

For complex styles, like a Gantt chart or segmenting various sections, it's advisable to declare a separate Styled-component.

I also recommend a handy tool for creating complex grids: https://grid.layoutit.com/

Flexbox can be used as Gap, directly speaking, it solves what Grid System wants to do, which is to use negative Margin in Row to offset the padding of Col at the beginning and end of a row.

Then... is there no problem?

I think if it was better, Bootstrap 5 would have changed it long ago

We can find that the length of the Gap will not be calculated and included in the flex item (25% * 4 if the ratio is used to allocate the space), that is, the Gap will be more than 100%, causing the version to run.

You can use an algorithm to use flex-basis: 0 0 ratio, but you can also use 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>
    <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);
`;

The above is used. Grid System, the following is using Flex + to calculate Gap. It seems to be aligned, but there seems to be no difference? Kind of like Gap for the sake of thinking Gap

Another thought: Bootstrap 5 nested gutter?​

One thing to note is that the design of Bootstrap 5 is to override --bs-gutter-x

The advantage of doing this is that we often introduce many different components so that they will not be affected

The next layer of nesting will not be affected. If you need the same thing below, you need to cover the lower layer again. Or set it from the final configuration file, which means that gutters is actually needed. Because we will need different gutter for grids in different sizes, and unify their gutter, Then make different gutter according to some blocks

in conclusion​

So where is it suitable to use Flex + Gap?

Where there is no need to use proportions to allocate container space

It is a common place to use mr-? to push away

If you need a grid list, just use Grid System, or Flex + CSS Grid Gap