css grid + react component challenge

Question

Working on a css grid challenge with React in codepen.

This is the original codepen: https://codepen.io/tallys/pen/bvwZee/ What I have so far: 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;
}

So I got main content area to span across the grid container. However, I'm stuck as to how I can make the aside always 150px and the grid container align nicely with the div at the top?

I'm really new to grid and I enjoyed it. I don't know if this is the right answer It's not the right answer, but you gotta use grid-column-start/end ;) — trinaldi
– trinaldi, Commented Apr 3, 2018 at 2:04

trinaldi · Accepted Answer · 2018-04-03 02:32:18Z

2

I'm new to grid very nice first try. I think this is a little bit hacky, but...it does the job (I guess)

I don't think the CSS on this snippet will work, but nevertheless, 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>

edited Apr 3, 2018 at 2:32

answered Apr 3, 2018 at 2:25

trinaldi

2,9502 gold badges35 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Facundo Corradini Over a year ago

Awesome approach! :)

Facundo Corradini Over a year ago

Maybe should explain a little what you're doing, so others can understand it easily. If I'm not missing something, it's just using a sibling selector to modify the grid-column on .main so it goes from "auto" to "span 2" when there's a previous .sidebar sibling. That's awesome. No need to use the !important btw

trinaldi Over a year ago

Indeed. When there's no sidebar, the .main class takes all the space with the css property grid-column: span 2; (The main container has 2 columns, one with 150px and the other filling the rest). When then sidebar is present (&) I used the sibling selector ~ to change the 'span' of the .main class, it now just fill the rest (width - 150px).

Annette Lin Over a year ago

I would not have thought about using sibling selectors! That actually makes things a lot more straight forward. Thank you :)

Facundo Corradini · Accepted Answer · 2018-06-10 00:29:34Z

0

I know it's a really late response, but I remembered this challenge... and I couldn't resist.

My approach is fixing the main to the second column, while setting the sidebar width on the item itself (and a margin-right to fake the grid-gap), allowing for the first column to be declared as 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

That way the first column will have a zero width if the sidebar is not loaded, and get to the 150px sidebar with when it loads.

answered Jun 10, 2018 at 0:29

Facundo Corradini

3,94312 silver badges24 bronze badges

Collectives™ on Stack Overflow

css grid + react component challenge

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related