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

user_11850665 0
Viewed 146

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

css-grid css
2 Answers

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

user_155451160

You need to use grid-template-columns to define how many columns you want. Here, we are using three columns layout (grid-template-columns: repeat(3, 1fr)) to align three things side by side. And text-align: center to center the whole grid inside the container.

export const Container = styled.div`
  width: 375px;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  grid-gap: 10px;
  border: 1px solid blue;
`;
user_92754760
Related