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

我是grid的新手第一次尝试非常好。我认为这有点像hacky，但是...它完成了工作（我猜）

我不认为此代码段上的CSS会有效，但不过，here's the Pen ...

＆＃13;

//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'));

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我知道这是一个真的迟到的回应，但我记得这个挑战......我无法抗拒。

我的方法是将main修复为第二列，同时在项目本身上设置sidebar宽度（以及margin-right以伪造grid-gap），允许将第一列声明为minmax(0, auto)。

.grid-container {
  grid-template-columns: minmax(0, auto) 1fr;
  /*grid-gap: 30px;*/
}
.main {
  grid-column: 2;
}
.sidebar {
  margin-right: 30px;
  width: 150px;
}

https://codepen.io/facundocorradini/pen/eKgVzP

这样，如果没有加载侧边栏，第一列的宽度将为零，并且在加载时会到达150px侧边栏。

css grid +反应组件挑战

2 个答案: