Search code examples
csscss-grid

grid-auto-flow: column cannot catch child div width with percentage value

I want to use the CSS grid property to put the line and some span tags horizontally and flexibly like the below capture.

enter image description here

Actually, the easiest way is using CSS flex property with gap property but the old ios version cannot allow gap property.

So I used grid-auto-flow: column; but because of this property, the width of the child tag cannot work well.

import styled from "styled-components";

export const Container = styled.div`
  width: 375px;
  display: grid;
  /* grid-template-columns: repeat(5, 1fr); */
  grid-auto-columns: auto;
  place-content: center;
  align-items: center;
  grid-gap: 10px;
  border: 1px solid blue;
`;

export const Flex = styled.div`
  width: 375px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid blue;
`;

export const LineWithPercentage = styled.div`
  width: 42%;
  border-bottom: 1px solid black;
`;

export const LineWithPX = styled.div`
  width: 164px;
  border-bottom: 1px solid black;
`;

export const NumberWrapper = styled.div`
  width: 22px;
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  background-color: pink;
`;
export const Number = styled.span`
  color: white;
`;

export default function App() {
  return (
    <>
      <Container>
        <NumberWrapper>
          <Number>1</Number>
        </NumberWrapper>
        <NumberWrapper>
          <Number>2</Number>
        </NumberWrapper>
        <span>Percentage</span>
        <LineWithPercentage />
        <NumberWrapper>
          <Number>3</Number>
        </NumberWrapper>
      </Container>
      <br />
      <br />
      <Flex>
        <NumberWrapper>
          <Number>1</Number>
        </NumberWrapper>
        <NumberWrapper>
          <Number>2</Number>
        </NumberWrapper>
        <span>Px</span>
        <LineWithPX />
        <NumberWrapper>
          <Number>3</Number>
        </NumberWrapper>
      </Flex>
    </>
  );
}

Is there any good idea for this issue?

I also added codesandbox link. https://codesandbox.io/s/nice-ptolemy-pbq4uh?file=/src/App.tsx

Solution

  • So I used grid-auto-flow: column; but because of this property, the width of the child tag cannot work well.

    You were was on the right way, but to get the same result as with Flexbox you need to:

    Container style

    1. Remove place-content: center;
    2. Set grid-auto-columns: min-content;
    3. Add grid-auto-flow: column;
    export const Container = styled.div`
  width: 375px;
  display: grid;
  grid-auto-columns: min-content; /* changed */
  grid-auto-flow: column; /* new line */
  /* place-content: center; */ /* remove */
  align-items: center;
  grid-gap: 10px;
  border: 1px solid blue;
`;

    After that we get other problem with the span line, because we have set grid-auto-columns: min-content; and all chidren elements should stack in one line with their own absolute width, but LineWithPercentage style has relative width. To fix this, we use calc() function, where we take width 375px from the Container style of and multiply by 0.42 (42%).

    export const LineWithPercentage = styled.div`
  width: calc(375px * 0.42); /* 42% */
  border-bottom: 1px solid black;
`;

    Edit dazziling-code