hi, i’ve been playing around with css grid for a few days now, but i seem to have hit a road block and can’t figure out how to solve the problem i’m facing. i want the sidebar on the right to extend down as many rows as its content requires, without affecting the article cells to its left. i also want those article cells to extend to the extreme right edge of the grid when the sidebar content runs out. below is a minimal example of code that gets me as far as i’ve been able to so far. as you can see from the screenshot, the grid is laid out superficially, but i have failed to actually make the different cells respond dynamically to each other. i’ve been playing around with the auto-flow settings, but still have not figured out how to make the different cells size themselves independently and wrap around each other.

any help would be appreciated! TIA.

r/web_design - help creating dynamic article / sidebar layout with css grid

<!DOCTYPE html>

<html>

`<head>`

	`<meta charset="utf-8">`

	`<meta name="viewport" content="width=device-width">`

	`<title>grid template</title>`
	`<style type="text/css" media="screen">`

.wrapper {

`display: grid;`

`grid-gap: 1.25rem;`

`padding: 0.74rem;`

`grid-template-columns: repeat(4, 1fr);`

}

header {

`background: #eee;`

`border-style: solid;`

`border-color: deepPink;`

`grid-row: auto start;`

`grid-column: 1 / span end;`

}

article {

`background: #eee;`

`border-style: solid;`

`border-color: deepPink;`

`grid-column: 1 / 4;`

}

.sidebar {

`background: #eee;`

`border-style: solid;`

`border-color: deepPink;`

`grid-column: 4 / end;`

`grid-row: 2 / end;`

}

footer {

`background: #eee;`

`border-style: solid;`

`border-color: deepPink;`

`grid-column: 1 / span end;`

}

	`</style>`

`</head>`

`<body>`

	`<div class="wrapper">`

	`<header>`

		`header content`

	`</header>`

	`<article>`

		`article content 1`

	`</article>`

	`<article>`

		`article content 2`

	`</article>`

	`<article>`

		`article content 3`

	`</article>`

	`<div class="sidebar">`

		`sidebar:`

		`<ul>`

<li>line item 1</li>

<li>line item 2</li>

<li>line item 3</li>

		`</ul>`

	`</div>`

	`<footer>`

		`footer content`

	`</footer>`

	`</div>`

`</body>`

</html>



Source link

Write A Comment