将组件从css网格中移除
我需要调整转盘组件的大小(使其更小)。为此,我在css类中使用了width,但它不起作用(在chrome的css检查器中,它显示为注释)。我怎么做呢 grid.css将组件从css网格中移除,css,reactjs,grid,Css,Reactjs,Grid,我需要调整转盘组件的大小(使其更小)。为此,我在css类中使用了width,但它不起作用(在chrome的css检查器中,它显示为注释)。我怎么做呢 grid.css .wrapper { display: grid; /* grid-gap: 10px; */ grid-template-rows: minmax(300px, 500px) 1fr; grid-template-columns: 1fr; } .carousel { width: 50
.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
'''
从“React”导入React
从“./touring.jsx”导入锦标赛
从“./Carousel.jsx”导入旋转木马
导入“../resources/styles/grid.css”
常量应用=()=>(
)
导出默认应用程序
'''
作为百分比的宽度规则必须是某物的百分比,即某物是父元素的百分比(如果它具有定义的宽度)。您需要在转盘的包含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%空间,即包装器定义允许carousel扩展到的空间。