Question

0

105

Vistas

css - how to make flex item 3 in a row and keeping 1:1 ratio when resizing window

I want to make the flex item 3 in a row and keeping 1:1 ratio when resizing window.

App.js

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <div className="container">
        <div className="item">123</div>
        <div className="item">123</div>
        <div className="item">123</div>
        <div className="item">123</div>
        <div className="item">123</div>
        <div className="item">123</div>
        <div className="item">123</div>
        <div className="item">123</div>
      </div>
    </div>
  );
}

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.container {
  display: flex;
  justify-content: flex-start;
  border: 1px solid orange;
  flex-wrap: wrap;
  padding: 1rem;
}

.item {
  flex-basis: 30%;
  border: 1px solid grey;
  margin: 0.1rem;
}

CodeSandbox:
https://codesandbox.io/s/elegant-hamilton-iiwrh?file=/src/App.js

How can I do it?

7 months ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

What about using grid system instead ? https://codesandbox.io/s/naughty-ganguly-lzdg9

More info: https://developer.mozilla.org/fr/docs/Web/CSS/grid

7 months ago · Juan Pablo Isaza Denunciar

0

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-13T12:22:03.204Z

You should be using display: grid for .container and aspect-ratio: 1/1 for .item

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.item {
  background-color: #1eaafc;
  background-image: linear-gradient( 130deg, #6c52d9, #1eaafc 85%, #3edfd7);
  border-radius: 4px;
  border: 6px solid #171717;
  box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
  color: #fff;
  aspect-ratio: 1/1;
}

<div class="container">
  <div class="item">123</div>
  <div class="item">123</div>
  <div class="item">123</div>
  <div class="item">123</div>
  <div class="item">123</div>
  <div class="item">123</div>
  <div class="item">123</div>
  <div class="item">123</div>
</div>

aspect-ratio

The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.

So, aspect-ratio:1/1 ensures that the attr.width === attr.height always.

'fr' unit for grid layout

CSS Grid Layout introduces a new unit of length called fr, which is short for “fraction”. MDN defines the fr unit as a unit which represents a fraction of the available space in the grid container.

So for a 3 column layout we can write,

grid-template-columns: 1fr, 1fr, 1fr;

The repeat notation - If you find yourself repeating length units, use the CSS repeat() function

grid-template-columns: repeat(3, 1fr);