This is my current UI.

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

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>

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>

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

CodePudding user response：

By changing a little bit your HTML structure I have what you are looking for.

import "./styles.css";

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

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

.container {
  display: grid;
  gap: 2rem;
}
.row {
  display: grid;
  gap: 5rem;
}
.row:nth-child(1),
.row:nth-child(3) {
  grid-template-columns: auto auto;
  justify-content: center;
}
.row:nth-child(2) {
  grid-template-columns: auto auto auto;
  justify-content: center;
  gap: 5rem;
}
.item {
  width: 50px;
  height: 50px;
  border: 1px solid grey;
  border-radius: 50%;
}

CodePudding user response：

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 >
  <div>1</div>
  <div>2</div>
</div>
<div >
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>
<div >
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>  
</div>
<div >
  <div>1</div>
  <div>2</div>  
</div>

CodePudding user response：

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