reactjs - CSS网格+React组件挑战

Question

在 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 很好地对齐？

Answer 1

我是网格的新手，第一次尝试非常好。我认为这有点hacky，但是......它完成了工作(我猜)

我认为此代码片段上的 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>