How to make content wrapper “on top” of css grid
Multi tool use
How to make content wrapper “on top” of css grid
I'm working on a site layout using a two-column CSS grid, which looks somewhat like this. It works fine and all the content centers perfectly in each div. The cells with "bg" just have a background image. Each grid cell "touches" the borders of the browser window.
+--------+--------+
| text | bg |
+--------+--------+
| bg | text |
+--------+--------+
| text |
+-----------------+
However, is there an easy way to wrap & center the content so that it doesn't go beyond a certain width? I could target individual paragraphs to align left or right depending on their cells, but I was wondering if there's a more elegant way to do this? The brackets are the "wrapper".
+--------+--------+
| [text| bg] |
+--------+--------+
| [bg |text] |
+--------+--------+
| [ text ] |
+-----------------+
@Michael_B codepen.io/arjenbokhoven/pen/oymYRe Succinctly: I want all text to be constrained to the same width as the bottom paragraphs spanning 2 columns, so that the single cells have extra white space on their respective left and right sides.
– Arjen Bokhoven
Jul 1 at 3:33
2 Answers
2
You could put a wrapper around the entire two column grid and add some padding to the left and right of the wrapper.
Try this:-
.container {
display: flex;
flex-direction: column;
background: #fcfcfc;
}
.row {
display: flex;
flex-direction: row;
padding: 1em 2em;
align-items: center;
}
.column {
background: #fff;
}
.gridbg {
background-image: url(http://via.placeholder.com/350x150);
background-repeat: no-repeat;
background-size: cover;
height: 20vh;
width: 50%;
flex-shrink: 0;
}
.px-2 {
padding: 0 1em;
}
h2 {
margin-top: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div>
<h2>Heading</h2>
<p>Vestibulum felis ligula, placerat non felis id, hendrerit interdum nunc. Fusce finibus, sapien ac blandit ultrices, est tortor viverra turpis, et venenatis ipsum purus id magna. </p>
</div>
</div>
<div class="row">
<div class="gridbg">
</div>
<div class="px-2">
<h2>Heading</h2>
<p>Vestibulum felis ligula, placerat non felis id, hendrerit interdum nunc. Fusce finibus, sapien ac blandit ultrices, est tortor viverra turpis, et venenatis ipsum purus id magna. </p>
</div>
</div>
</div>
</body>
</html>
Thanks, but this will not work because it will wrap the whole grid. I want the grid to be full-width but the content wrapped, if you see what I mean.
– Arjen Bokhoven
Jun 30 at 4:03
Could you please elaborate more?
– Ankit Sharma
Jun 30 at 10:16
My two-column grid layout is full-width, and some grid cells contain paragraphs of text, while others have only a background image. I would prefer my paragraphs to be constrained to an overall content width, and not full-width like my grid layout. Essentially, I want all my text to be wrapped.
– Arjen Bokhoven
Jul 1 at 3:21
I now understand what you are looking for. Probably, you would need javascript to set the desired widths.
– Ankit Sharma
Jul 1 at 4:44
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Please post the code you have tried.
– Michael_B
Jun 30 at 11:31