在codepen中使用React处理css网格挑战。
这是原始的代码:https://codepen.io/tallys/pen/bvwZee/我到目前为止所拥有的:https://codepen.io/al2613/pen/QmOyKo
.grid-container {
border: 2px dashed goldenrod;
display: inline-grid;
padding: 10px;
grid-template-columns: auto auto;
height: 100vh;
grid-gap: 30px;
}
因此,我让主要内容区域跨越网格容器。然而,我被困在如何使边框始终150px和网格容器与顶部的div对齐的问题上?
发布于 2018-04-03 10:25:08
我是grid
的新手,非常好的第一次尝试。我认为这有点老生常谈,but...it做了这项工作(我猜)
我不认为这个代码片段上的CSS可以工作,但是,here's the Pen...
//Don't edit the JS for the CSS Grid challenge!
class App extends React.Component {
state = {
sidebarActive: false,
}
toggleSidebar() {
this.setState({sidebarActive: !this.state.sidebarActive})
}
render() {
const buttonText = this.state.sidebarActive ? 'Toggle Sidebar Off' : 'Toggle Sidebar On';
const {sidebarActive} = this.state
return (
<div>
<h1 className="heading">CSS Grid when some sections don't render!</h1>
<div className="instructions">
<p>The challenge: Fix the CSS Grid so that the main area takes up all of the available space when the sidebar react component does not render. </p>
<button onClick={this.toggleSidebar.bind(this)}>{buttonText}</button>
</div>
<div className="grid-container">
{sidebarActive && <aside className="sidebar">Sometimes renders!</aside>}
<main className="main">Main content area that should always take up the rest of the space in the container. </main>
</div>
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
// Variables
$brand-color: darkblue;
$brand-section-color: white;
$brand-text-color: #222;
$react-accent: #61dafb;
$react-background: #292c34;
$breakpoint: 768px;
$font-heading: 'Permanent Marker', sans-serif;
$font-default: 'Oswald', sans-serif;
// Styles
body {
font-family: $font-default;
margin: 10vh 10vw;
color: $react-accent;
background: $react-background;
}
.heading {
font-family: $font-heading;
}
.instructions {
padding: 5px 12px 20px 12px;
margin-bottom: 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
background: lighten(adjust-hue($react-background, 30), 7);
font-size: 1.15rem;
button {
border: none;
background: $react-accent;
font-family: $font-default;
padding: 20px;
border-radius: 0;
cursor: pointer;
transition: .4s ease;
&:hover, &:active, &:focus {
background: adjust-hue($react-accent, 210);
}
}
}
.grid-container {
border: 2px dashed goldenrod;
display: inline-grid;
grid-template-columns: 150px repeat(1, 1fr);
height: 100vh;
width: 100%;
grid-gap: 30px;
}
.sidebar {
background: lighten($react-background, 7);
padding: 10px;
& ~ .main{
grid-column: auto !important;
}
}
.main {
background: darken($react-background, 7);
display: grid;
grid-column: span 2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<main id="app"></main>
https://stackoverflow.com/questions/49620908
复制相似问题