将组件从 CSS 网格中反应出来答案

【问题标题】：react component out of the css grid将组件从 CSS 网格中反应出来
【发布时间】：2020-01-13 02:50:06
【问题描述】：

我需要调整轮播组件的大小（使其更小）。为此，我在 css 类中使用宽度，但它不起作用（在 chrome 的 css 检查器中，它显示为注释）。我该怎么办？

grid.css

.wrapper {
    display: grid;
    /* grid-gap: 10px; */
    grid-template-rows: minmax(300px, 500px) 1fr;
    grid-template-columns: 1fr;
}

.carousel {
    width: 50%;
}

app.jsx

import React from 'react'
import Tournament from './Tournament.jsx'
import Carousel from './Carousel.jsx'
import '../resources/styles/grid.css'


const App = () => (
  <div className="wrapper">
      <Carousel className = "carousel"
        name='Copa de campeones'
        description=' Solo para los campeones de cada liga en su carrera'
        contact_name='Joaquin Cardenas'
        contact_number='+56951097841'
        date_tournament='2020-03-15'
        sport='Baby futbol'
      />

      <Tournament
        name='Copa de campeones'
        description=' Solo para los campeones de cada liga en su carrera'
        contact_name='Joaquin Cardenas'
        contact_number='+56951097841'
        date_tournament='2020-03-15'
        sport='Baby futbol'
      />
  </div >
)

export default App



'''

【问题讨论】：

标签： css reactjs grid

【解决方案1】：

作为百分比的宽度规则必须是 something 的百分比，即某物是父元素的百分比（如果它具有定义的宽度）。您需要在轮播的包含 div 上定义一个宽度。

.wrapper {
  display: grid;
  /* grid-gap: 10px; */
  grid-template-rows: minmax(300px, 500px) 1fr;
  grid-template-columns: 1fr;
  width: 400px; // give the parent element a defined width
  margin: auto; // you may need this to center the grid in whatever container *it* is in
}

.carousel {
    width: 50%; // this width is 50% of its parent, `wrapper` and will end up ~200px if the wrapper is ~400px
}

App.js

<div className="wrapper">
  <Carousel className = "carousel"
    name='Copa de campeones'
    description=' Solo para los campeones de cada liga en su carrera'
    contact_name='Joaquin Cardenas'
    contact_number='+56951097841'
    date_tournament='2020-03-15'
    sport='Baby futbol'
  />

  <Tournament
    name='Copa de campeones'
    description=' Solo para los campeones de cada liga en su carrera'
    contact_name='Joaquin Cardenas'
    contact_number='+56951097841'
    date_tournament='2020-03-15'
    sport='Baby futbol'
  />
</div >

【讨论】：

感谢您的回答。这对我有用，但我的轮播看起来不是它的 100% 大小，也就是说，它被切割了。如何使其与网格中定义的行具有相同的大小？
您可能希望carousel 类占用其包含的包装器分配给它的空间的 100%，即包装器定义了轮播允许扩展到的空间。