css - how to use grid with different number of item in a row

user_10686620 0
Viewed 277

This is my current UI.
enter image description here

This is what I want to make for the grid-item.

    1   2
  3   4   5
    6   7

How can I do it?

App.js

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <div className="container">
        <div className="item">1</div>
        <div className="item">2</div>
        <div className="item">3</div>
        <div className="item">4</div>
        <div className="item">5</div>
        <div className="item">6</div>
        <div className="item">7</div>
      </div>
    </div>
  );
}

style.css

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

.container {
  display: grid;
  grid-gap: 10px 12px;
  grid-template-columns: auto auto;
}

.item {
  width: 50px;
  height: 50px;
  border: 1px solid grey;
  border-radius: 50%;
}

Codesandbox
https://codesandbox.io/s/relaxed-meadow-zxclh?file=/src/styles.css

reactjs css javascript
4 Answers

A grid by definition has a set number of columns. What you can do though is defined a multiple of columns and apply a "column-span" rule to specific divs using grid-column.

grid-column

The grid-column CSS shorthand property specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.

Example uses 6 columns and each div spans either 2 or 3 columns to get the correct elements "per row". You can tweak the styles/layouts from here.

CSS:

.container {
  display: grid;
  grid-gap: 10px 12px;
  grid-template-columns: repeat(6, auto);
  justify-items: center;
}

JSX

<div className="App">
  <div className="container">
    <div className="item" style={{ gridColumn: 'span 3' }}>1</div>
    <div className="item" style={{ gridColumn: 'span 3' }}>2</div>
    <div className="item" style={{ gridColumn: 'span 2' }}>3</div>
    <div className="item" style={{ gridColumn: 'span 2' }}>4</div>
    <div className="item" style={{ gridColumn: 'span 2' }}>5</div>
    <div className="item" style={{ gridColumn: 'span 3' }}>6</div>
    <div className="item" style={{ gridColumn: 'span 3' }}>7</div>
  </div>
</div>

Edit css-how-to-use-grid-with-different-number-of-item-in-a-row

enter image description here enter image description here

You could even explicitly express the grid tracks you want them to be laid out on.

<div className="App">
  <div className="container">
    <div className="item" style={{ gridColumn: "2/4" }}>
      1
    </div>
    <div className="item" style={{ gridColumn: "4/6" }}>
      2
    </div>
    <div className="item" style={{ gridColumn: "1/3" }}>
      3
    </div>
    <div className="item" style={{ gridColumn: "3/5" }}>
      4
    </div>
    <div className="item" style={{ gridColumn: "5/7" }}>
      5
    </div>
    <div className="item" style={{ gridColumn: "2/4" }}>
      6
    </div>
    <div className="item" style={{ gridColumn: "4/6" }}>
      7
    </div>
  </div>
</div>

enter image description here enter image description here

On a 5-track grid, so you don't need to "center" between tracks.

grid-template-columns: repeat(5, auto);

...

<div className="App">
  <div className="container">
    <div className="item" style={{ gridColumn: "2" }}>
      1
    </div>
    <div className="item" style={{ gridColumn: "4" }}>
      2
    </div>
    <div className="item" style={{ gridColumn: "1" }}>
      3
    </div>
    <div className="item" style={{ gridColumn: "3" }}>
      4
    </div>
    <div className="item" style={{ gridColumn: "5" }}>
      5
    </div>
    <div className="item" style={{ gridColumn: "2" }}>
      6
    </div>
    <div className="item" style={{ gridColumn: "4" }}>
      7
    </div>
  </div>
</div>

enter image description here enter image description here

Hopefully by this point it is more clear how to use the grid tracks to layout content where you like.

user_86908570

you can use align-items: center; and justify-content: center; for a box having display: flex;

This will automatically adjust the alignment and put the content in the center of the box.

.flex-container {
  display: flex;
  background-color: grey;
  align-items: center;
  justify-content: center;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 1px;
  padding: 1px 10px;
  font-size: 30px;
}
<div class="flex-container">
  <div>1</div>
  <div>2</div>
</div>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>  
</div>
<div class="flex-container">
  <div>1</div>
  <div>2</div>  
</div>

user_87005220

You can use the bootstrap inbuilt classes.

Step-1 : Just add the bootstrap CDN link to inedx.html from here

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />

Step-2 : Use this classes

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <div className="container p-4 text-center">
        <div className="row d-flex justify-content-evenly ">
          <div className="item col-6">1</div>
          <div className="item col-6">2</div>
        </div>
        <div className="row d-flex justify-content-evenly ">
          <div className="item col-4">3</div>
          <div className="item col-4">4</div>
          <div className="item col-4">5</div>
        </div>
        <div className="row d-flex justify-content-evenly ">
          <div className="item col-6">6</div>
          <div className="item col-6">7</div>
        </div>
      </div>
    </div>
  );
}

Step-3 And use this style.css

.item {
  width: 50px;
  height: 50px;
  border: 1px solid grey;
  border-radius: 50%;
}

If justify-content-evenly doesn't work , you can try justify-content-around.

enter image description here

user_109623640

Use bootstrap for grid. It has classes for rows and column. I will make it easy

user_108010400
Related