How do you have a CSS grid that is responsive for its child container when centered horizontally and vertically, I want to do this with CSS grid only. The code below doesn't work at all but it's the basics of what I want, can someone please get my code to work and make the box responsive, please!
html,
body {
display: grid;
justify-items: center;
align-items: center;
height: 100vh;
margin: 0;
}
.box {
height: 500px;
width: 100%;
max-width: 800px;
background: red;
border: 3px solid blue;
}
<div class="box"></div>
remove html
body {
display: grid;
justify-items: center;
align-items: center;
height: 100vh;
margin: 0;
}
.box {
height: 500px;
width: 100%;
max-width: 800px;
background: red;
border: 3px solid blue;
box-sizing:border-box;
}
<div class="box"></div>
just remove HTML from your CSS target element cause HTML is the root element of your page
body {
display: grid;
justify-items: center;
align-items: center;
height: 100vh;
margin: 0;
}
.box {
height: 500px;
width: 100%;
max-width: 800px;
background: red;
border: 3px solid blue;
}
<div class="box"></div>
Related
I've been trying to get familiar with grid while making the sidebar, and I encountered the problem where my grid items/children aren't equal to each-other in height even though they're supposed to be the same size.
* {
margin: 0;
padding: 0;
}
.mainContainer {
height: 500px;
gap: 30px;
display: grid;
grid-row-template: repeat(auto-fill, 1fr);
background-color: black;
color: white;
justify-items: center;
align-items: start;
}
.mainContainer div {
display: grid;
align-content: center;
justify-content: center;
width: 60%;
border: 1px solid yellow;
height: 60%;
border-radius: 10px;
}
.mainContainer img {
height: 50%;
width: 100%;
object-fit: contain;
}
<div class="mainContainer">
<div> <img src="https://pbs.twimg.com/profile_images/1455185376876826625/s1AjSxph_400x400.jpg"> </div>
<div> Box 1 </div>
<div> Box 2 </div>
<div> Box 3 </div>
</div>
Focusing on the image
.mainContainer img{
height: 30px; // set it to any size
object-fit: contain;
}
I think you should use px instead of %
You can use this, it is done without grid, but with a flex-column.
* {
margin: 0;
padding: 0;
}
.mainContainer{
height: 500px;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
background-color: black;
color: white;
}
.mainContainer > * {
height: 25%;
width: 60%;
border: 1px solid yellow;
/* center image / text in children boxes */
display: flex;
justify-content: center;
align-items: center;
}
.mainContainer img {
object-fit: contain;
}
I am using this to center things in CSS:
.testclass {
display: flex;
justify-content: center;
}
but when i want to scale elements using width and height, it doesn't work and my elements are not centered.
Like this:
.testclass {
display: flex;
justify-content: center;
width: 200px;
height: 200px;
}
What's the problem?
This looks like the expected behavior.
Remember that in this case justify-content: center; centers what is inside the container - not the container itself.
EDIT:
I added margin: 0 auto; to center the container.
#container1 {
display: flex;
justify-content: center;
border: 1px solid red;
}
#container1 > div {
border: 1px solid blue;
background: yellow;
}
#container2 {
display: flex;
justify-content: center;
border: 1px solid red;
width: 200px;
height: 200px;
margin: 0 auto;
}
#container2 > div {
border: 1px solid blue;
background: yellow;
}
<div id="container1">
<div>test 1</div>
</div>
<div id="container2">
<div>test 2</div>
</div>
display: flex; and justify-content: center;
works for parent elements. That is, child elements of that particular parent will be centered, not the parent.
To center .testclassHTML
<div class="parent">
<div class="testclass"></div>
</div>
CSS
.parent {
background-color: red;
display: flex;
justify-content: center;
}
.testclass {
background-color: green;
width: 200px;
height: 200px;
}
If you want full center (horizontal vertical) you can use this code:
.container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="testclass">Content</div>
</div>
I am getting white space between my parent div and child div when adding a border to the parent div. I have tried everything (overflow, (min) height/width, increasing border width) but nothing works. I have the same problem with images when.
Does someone know how I can fix this and why this is happening?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
}
.container {
margin: auto;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100vh;
width: 100vw;
}
.big-box {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background: white;
border: 5px solid darkgreen;
overflow: hidden;
height: 100px;
width: 100px;
}
.box {
flex: 1 1 33%;
min-height: 100%;
min-width: 100%;
background: black;
color: white;
border: none;
overflow: hidden;
}
<div class="container">
<div class="big-box">
<div class="box">
<h2>hello</h2>
</div>
</div>
</div>
Yes, I have come across this and I think it is related to fractions of a CSS pixel being interpreted in different ways when the system is mapping them to actual screen pixels, there being more than one screen pixel to a CSS pixel on many modern screens. The calculations of course vary on different zoom settings and so sometimes you can see the extra white and sometimes not depending on zoom level.
A practical, if hacky, way of getting round this is to give the parent the same background color as the child if that doesn't mess up other stuff in your styling.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
}
.container {
margin: auto;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100vh;
width: 100vw;
}
.big-box {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background: white;
border: 5px solid darkgreen;
overflow: hidden;
height: 100px;
width: 100px;
background-color: black;
}
.box {
flex: 1 1 33%;
min-height: 100%;
min-width: 100%;
background: black;
color: white;
border: none;
overflow: hidden;
}
<div class="container">
<div class="big-box">
<div class="box">
<h2>hello</h2>
</div>
</div>
</div>
If that messes up your styling I suppose you could go one (hackier) step further and use linear-gradient backgrounds on the parent to give it a sort of black inner border of a (CSS) px or two and leave the rest as white.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
}
.container {
margin: auto;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100vh;
width: 100vw;
}
.big-box {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background: white;
border: 5px solid darkgreen;
overflow: hidden;
height: 100px;
width: 100px;
background-image: linear-gradient(black 0 2px, transparent 2px calc(100% - 2px), black calc(100% - 2px) 100%), linear-gradient(to right, black 0 2px, white 2px calc(100% - 2px), black calc(100% - 2px) 100%);
}
.box {
flex: 1 1 33%;
min-height: 100%;
min-width: 100%;
background: black;
color: white;
border: none;
overflow: hidden;
}
<div class="container">
<div class="big-box">
<div class="box">
<h2>hello</h2>
</div>
</div>
</div>
This question already has answers here:
How does the vertical-align property work?
(2 answers)
Closed 2 years ago.
I can't figure this out, it's suposed to put the boxes in the middle of it's container, but I can't make them move.
The idea is to center the inside the wrapper and to place them horizontally in the middle without having to fuzz around with margins or paddings and using veritcal-align.
#wrapper {
width: 1000px;
height: 1000px;
}
#container {
width: 900px;
height: 900px;
text-align: center;
display: inline-block;
background-color: lightblue;
}
.box {
width: 200px;
height: 200px;
margin: 0 auto;
display: inline-block;
vertical-align: middle;
background-color: lightgreen;
border: 1px solid grey;
margin: 10px;
}
<div id="wrapper">
<div id="container">
<div class="box">BOXES</div>
<div class="box">BOXES</div>
<div class="box">BOXES</div>
</div>
</div>
I think you are looking for flexbox.
I have adapted your jsfiddle to fit
https://jsfiddle.net/ke4w58ra/
The folowing code is what I have changed to your #content element.
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
Essentially, setting the elements to display in the center horisontally (align-items) and vertically (justify-content). With a gap of 5px to space the boxes out.
For more information, look here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Below is the integrated form of the JSFiddle
#container{
width: 100vw;
height: 100vh;
text-align: center;
display: inline-block;
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
}
.box{
width: 200px;
height: 200px;
margin: 0 auto;
background-color: lightgreen;
border: 1px solid grey;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
}
body {
margin: 0px;
}
<body>
<div id="container">
<div class="box">BOXES</div>
<div class="box">BOXES</div>
<div class="box">BOXES</div>
</div>
</body>
This question already has answers here:
Stretch columns in two columns layout with shared header using flexbox
(2 answers)
Closed 4 years ago.
I have this layout, where a row wrap flex container has a first child with 100% width and 2 more children on the second row. The container has a fixed height and the first child (Filters block below) is collapsible (i.e. has 2 possibles values for height).
I would like the blocks on the last line to take all available height in all cases (filters block collapsed or expanded), but I can't find a solution.
I've tried various combinations of height, align-items/align-self: stretch, to no avail. Setting the pdt/list blocks height to 100% makes them effectively 100% of parent container, so they overflow due to the filters.
I know I could achieve it by making the first container flex column and throw in a second one with flex row,but I'd like to keep the current markup if possible. Any idea?
JSfiddle: https://jsfiddle.net/Lp4j6cfw/34/
HTML
<div id="lp-tag">
<div id="header">HEADER</div>
<div id="lp-ctnr">
<div id="filters" onclick="toggle()">FILTERS</div>
<div id="pdt">PDT</div>
<div id="list">LIST</div>
</div>
CSS
#lp-tag{
display: flex;
flex-flow: column nowrap;
width: 350px;
margin: auto;
border: 1px solid red;
height: 250px;
}
#header{
background: lightblue;
height: 80px;
}
#lp-ctnr{
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-content: flex-start;
align-items: stretch;
border: 1px solid green;
flex: 1;
}
#filters{
width: 100%;
background: lightgreen;
height: 45px;
}
.close{
height: 20px !important;
}
#pdt, #list {
flex: 1;
border: 1px solid blue;
text-align: center;
align-self: stretch;
}
#pdt{
background: yellow;
}
#list{
background: pink;
}
If you are open to alternative layout methods, I'd recommend CSS-Grid
.lp-tag {
width: 250px;
margin: 1em auto;
border: 1px solid red;
height: 250px;
display: inline-grid;
grid-template-rows: auto 1fr;
}
.header {
background: lightblue;
height: 80px;
}
.header.small {
height: 40px;
}
.lp-ctnr {
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: repeat(2, 1fr);
border: 1px solid green;
flex: 1;
}
.filters {
grid-column: 1 / span 2;
background: lightgreen;
height: 45px;
}
.filters.large {
height: 80px;
}
.pdt,
.list {
border: 1px solid blue;
text-align: center;
}
.pdt {
background: yellow;
}
.list {
background: pink;
}
<div class="lp-tag">
<div class="header">HEADER</div>
<div class="lp-ctnr">
<div class="filters" onclick="toggle()">FILTERS</div>
<div class="pdt">PDT</div>
<div class="list">LIST</div>
</div>
</div>
<div class="lp-tag">
<div class="header small">HEADER</div>
<div class="lp-ctnr">
<div class="filters large" onclick="toggle()">FILTERS</div>
<div class="pdt">PDT</div>
<div class="list">LIST</div>
</div>
</div>
This is the only solution I can see without an intermediary container. https://jsfiddle.net/5j38ouvs/
However, I would probably do like Nandita and add a surrounding container like here: https://jsfiddle.net/8md4oyLx/
CSS
#lp-ctnr{
display: flex;
flex-direction: column;
border: 1px solid green;
height: 550px;
width: 350px;
margin: auto;
}
#filters{
width: 100%;
background: lightgreen;
}
.close{
height: 20px !important;
}
#pdt{
flex-grow: 1;
background: yellow;
}
#list{
flex-grow: 1;
background: pink;
}
.list-container {
flex-grow: 1;
border: 1px solid blue;
text-align: center;
display: flex;
flex-direction: row;
}
HTML
<div id="lp-ctnr">
<div id="filters" onclick="toggle()">FILTERS</div>
<div class="list-container">
<div id="pdt">PDT</div>
<div id="list">LIST</div>
</div>
</div>