css-如何在一行中使用不同數量的專案的網格

這是我目前的用戶界面。

這就是我想要為網格專案制作的內容。

    1   2
  3   4   5
    6   7   

我該怎么做？

應用程式.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>
  );
}

樣式檔案

.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

您甚至可以明確表達您希望在其上布置的網格軌道。

<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>

在 5 軌網格上，因此您無需在軌道之間“居中”。

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>

希望到此為止，您可以更清楚地了解如何使用網格軌道在您喜歡的位置布置內容。

uj5u.com熱心網友回復：

通過稍微改變你的HTML結構，我就能得到你想要的東西。

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%;
}

uj5u.com熱心網友回復：

你可以使用align-items: center;和justify-content: center;一個盒子有display: flex;

這將自動調整對齊方式并將內容放在框的中心。

.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>

uj5u.com熱心網友回復：

您可以使用引導程式內置類。

第 1 步：只需從這里將引導 CDN 鏈接添加到 inedx.html

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

第 2 步：使用此類

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>
  );
}

第 3 步并使用這個 style.css

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

如果justify-content-evenly不起作用，您可以嘗試justify-content-around。

uj5u.com熱心網友回復：

對網格使用引導程式。它有行和列的類。我會讓事情變得容易

標籤：javascript css 反应

上一篇：答應麻煩！我怎樣才能以等待結束的方式寫這個？

下一篇：Jquery-FadeIn似乎在推低div