I have this Css grid, with grid items, which with chrome can i easilty be centered by applying justify-items:center or that kind of magic.
But this solution does not seem to work in IE, it keeps being stuck to the left side.
https://codepen.io/anon/pen/jjgmNX
HTML:
<div class="grid-container">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
</div>
css:
.grid-container {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 20px;
justify-items: center;
}
.item-1 {
background-color: rgba(200,520,266,.75);
border-color: #b4b4b4;
grid-column: 1;
grid-row: 1;
}
.item-2 {
background-color: rgba(145,520,0,.75);
grid-gap: 20px;
}
.item-3 {
background-color: rgba(145,520,0,.75);
grid-column: 3;
grid-row: 1;
}
.item-4 {
background-color: rgba(0,0,0,.25);
border-color: transparent;
grid-column: 2;
grid-row: 2;
}
How do i center the child divs - both supported in IE and chrome ?
You can use flexbox instead of grid that has good support on the browsers.
.grid-container {
display: flex;
justify-items: center;
align-items: center;
flex-wrap: wrap;
}
.item-1 {
flex: 1 1 33.33%;
background-color: rgba(200,520,266,.75);
border-color: #b4b4b4;
}
.item-2 {
flex: 1 1 33.33%;
background-color: rgba(145,520,0,.75);
}
.item-3 {
flex: 1 1 33.33%;
background-color: rgba(145,520,0,.75);
}
.item-4 {
flex-basis: 33.33%;
/* important */
margin: auto;
background-color: rgba(0,0,0,.25);
border-color: transparent;
}
justify-items isn't supported in IE for display: grid. https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items#Support_in_Grid_layout
A tag soup workaround is to have the sub containers with display:flex, as justify-items is supported for that: or just use flexbox exclusively.
Related
I always struggle with flexboxes. This time is no exception trying to solve this for a solid hour and read a lot of similar questions but none of these gave me the right idea on how to do it with my layout. I hope that some of you could help me out with how to do this :)
I'm creating a MiniPlayer. The desired look of it is like that:
At the moment it looks like this:
This is my current css file:
.MiniPlayer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100px;
display: flex;
flex-direction: row;
img{
width: auto;
height: 90%;
max-height: 100px;
max-width: 100px;
flex-direction: column;
}
.Title{
flex-direction: column;
flex-wrap: wrap;
}
.Name{
flex-direction: column;
flex-wrap: wrap;
}
.MediaButton{
flex-direction: row;
}
.Slider{
flex-direction: column;
flex-wrap: wrap;
flex-grow: 4;
}
Figured I would add a flexbox solution as initially requested.
* {
text-align: center;
}
.img,
.title,
.name,
.btn,
.slider {
border: solid black 2px;
}
.wrapper {
border: solid 1px orange;
padding: 1em;
display: flex;
}
.wrapper-2 {
margin-left: 1em;
width: 75%;
display: flex;
flex-direction: column;
}
.img {
width: 25%;
}
.title,
.name {
width: 50%;
margin-bottom: 1em;
}
.btn {
width: 25%;
margin-bottom: 1em;
}
.space-between {
display: flex;
justify-content: space-between;
}
<div class="wrapper">
<div class="img">img</div>
<div class="wrapper-2">
<div class="title">title</div>
<div class="space-between">
<div class="name">name</div>
<div class="btn">btn</div>
</div>
<div class="slider">slider</div>
</div>
</div>
Would highly recommend doing this in grid. It is possible by making a lot of clumsy new containers, but you have much better layout control with grid.
If you're not too comfortable with grid, you can use a CSS Grid Generator to do the work for you - works just fine.
.parent {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-gap: 5px;
}
.parent div {
border: 1px solid black;
}
.div1 {
grid-area: 1 / 1 / 5 / 3;
}
.div2 {
grid-area: 4 / 3 / 5 / 7;
}
.div3 {
grid-area: 3 / 6 / 4 / 7;
}
.div4 {
grid-area: 1 / 3 / 2 / 6;
}
.div5 {
grid-area: 2 / 3 / 3 / 6;
}
<div class="parent">
<div class="div1">img</div>
<div class="div2">slider</div>
<div class="div3">pause</div>
<div class="div4">title</div>
<div class="div5">name</div>
</div>
I have a grid container and I want to align three divs like this, also doing them responsive (all stacked). I don't have the heights of the divs.
It would be two columns, in one two rows (two divs one below another), in another column a div centered vertically having in mind the height of the two first divs.
I can use grid or flexbox.
Thanks
Using Flexbox:
.wrapper {
width: 400px;
border: 2px solid black;
height: 300px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
align-items: center;
}
.child {
height: 100px;
width: 150px;
border: 1px solid black;
margin-top: 20px;
margin-bottom: 20px;
}
<div class="wrapper">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
and also grid :
Example from2 columns and the third element spanning through 2 rows and margin itself in the middle.
section {
display: grid;
grid-template-columns: repeat(2, minmax(270px, 1fr));/* or any value you need */
grid-gap: 2em;/* or any value you need */
padding: 2em;/* or any value you need */
counter-reset: divs; /*demo*/
width:max-content;/* or any value you need */
margin:auto;/* or any value you need */
}
div {
border: solid red;
min-height: 30vh;/* or any value you need */
width: 270px;/* or any value you need */
display: flex; /* demo*/
}
div {
margin-left: auto;
}
div:nth-child(3) {
grid-column: 2;
grid-row: 1 / span 2;
margin: auto 0;
}
/*demo*/
div:before {
counter-increment: divs;
content: counter(divs);
margin: auto;
font-size: 3em;
}
<section>
<div></div>
<div></div>
<div></div>
</section>
To play with the grid system, you can use : https://css-tricks.com/snippets/css/complete-guide-grid/ / http://gridbyexample.com/ and https://codepen.io/pen/ for the playground.
Here's a jsfiddle: https://jsfiddle.net/5csL2dqy/
.container {
display: flex;
flex-direction: row;
width: 100%;
}
.right {
display: inherit;
align-items: center;
}
.a, .b, .c {
box-sizing: border-box;
width: 150px;
margin: 20px;
border: 1px solid black;
}
<div class="container">
<div class="left">
<div class="a">
<p>
First div
</p>
</div>
<div class="b">
<p>
second div
</p>
</div>
</div>
<div class="right">
<div class="c">
<p>
Third div
</p>
</div>
</div>
</div>
You use the following inline-flex styles
#media only screen and (min-width: 600px) {
.container {
display: inline-flex;
}
.container div {
border: 1px solid red;
padding: 1em;
margin: 1em;
}
.container>div+div {
margin: auto;
}
}
#media only screen and (max-width: 600px) {
.container div:not(first-child) {
border: 1px solid red;
}
}
<div class="container">
<div>
<div>
1
</div>
<div>
2
</div>
</div>
<div>
3
</div>
</div>
This is one of only two answers with equal width/height gaps. G-Cyr's is the other:
.grid{
display: grid;
grid-template-columns: repeat(9,1fr);
grid-template-rows: repeat(7, 1fr);
height: 90vh;
width: 120vh;
}
.grid > div{
border: solid 3px orangered;
font: 26px sans-serif;
display: flex;
align-items:center;
justify-content:center;
}
.grid > div:nth-child(1){
grid-row: 1/span 3;
grid-column: 1/span 4;
}
.grid > div:nth-child(2){
grid-row: 3/span 3;
grid-column: 6/span 4;
}
.grid > div:nth-child(3){
grid-row: 5/span 3;
grid-column: 1/span 4;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
A specific text can't be put in the center in CSS grid.
I have a grid CSS but the text "Post Manager" seems to not go to center. I have made grid items into flex container but only this text seem to not follow the rule. Any thought is appreciated. Thank you.
body {
font-family: sans-serif;
}
.wrapper {
display: grid;
grid-template-columns: repeat(15, 1fr);
grid-template-rows: repeat(15, 1fr);
width: 100vw;
height: 100vh;
}
.gn {
background-color: #7fd2f0;
grid-row: 1 / 16;
writing-mode: vertical-lr;
text-orientation: mixed;
transform: rotateZ(180deg);
}
.ab {
background-color: #85fedd;
grid-column: 2/16;
}
.pm {
background-color: #f7f7f7;
grid-row: 2/16;
grid-column: 2/5;
text-align: center;
}
.wp {
background-color: #c6c6c6;
grid-column: 6/16;
grid-row: 2/16;
}
.center-text {
display: flex;
justify-content: center;
align-items: center;
}
<div class="wrapper">
<div class="center-text gn">Global Navigation</div>
<div class="center-text ab">Application Bar</div>
<div class="center-text pm">Post Manager</div>
<div class="center-text wp">Writing Space</div>
</div>
try this.
.pm {
grid-column: 2/6;
}
I am trying to create three items inside of a nested grid item. As you can see from the code, I've put the 'panels' div in-between the 'jumbo' and 'content' divs. I also nested three divs inside. In the CSS, I added a nested grid inside of .panels.
I want the 'panels' div to be split in three equally size parts on the vertical axis. Imagine three square blocks stack one after another. But the nested items don't fill the entire 'panels' div. If you run the code snippet, you can see that the panels are nested but don't take up the entire space. They take up a small percentage of their parent. I added background-color: white !important to one of the nested panels to show how small it is.
Another example can be seen here: https://codepen.io/rachelandrew/pen/NqQPBR/
But again, the nested E, F and G items don't expand to fill up the entire D section.
Is there a way to make the three panels fill in their parent?
.container {
display: grid;
width: 100%;
height: 100%;
grid-gap: 3px;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: 40px 130px 130px 130px 60px 330px 40px;
}
.header {
grid-column: 1 / -1;
}
.jumbo {
grid-column: 1 / -1;
grid-row: 2 / 5;
}
.panels {
grid-column: 3 / 9;
grid-row: 4 / 6;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.panel1 {
grid-row: 1 / 2;
grid-row: 1;
background-color: white !important;
z-index: 2;
}
.content {
grid-column: 1 / -1;
grid-row: 5 / 7;
}
.footer {
grid-column: 1 / -1;
}
/* Styling */
.container > div {
display: grid;
justify-content: center;
align-items: center;
font-size: 2em;
color: #ffeead;
}
html, body {
background-color: #ffeead;
box-sizing: border-box;
height: 100%;
margin: 0px;
font-family: "Work Sans"
}
.container > div:nth-child(1n) {
background-color: #96ceb4;
}
.container > div:nth-child(3n) {
background-color: #88d8b0;
}
.container > div:nth-child(2n) {
background-color: #ff6f69;
}
.container > div:nth-child(4n) {
background-color: #ffcc5c;
}
.panels > div:nth-child(1n) {
background-color: #96ceb4;
}
<div class="container">
<div class="header">
HEADER
</div>
<div class="jumbo">
JUMBO
</div>
<div class="panels">
<div class="panel1">PANEL1</div>
<div class="panel2">PANEL2</div>
<div class="panel3">PANEL3</div>
</div>
<div class="content">
CONTENT
</div>
<div class="footer">
FOOTER
</div>
</div>
You have align-items: center applied to the nested grid container (.panels).
With that rule, you override the default align-items: stretch, which would set your grid items to the full height of the parent. Instead, you have the items vertically centered.
So they can be full height, remove align-items: center from the .panels element:
.container > div:not(.panels) {
align-items: center;
}
.container {
display: grid;
width: 100%;
height: 100%;
grid-gap: 3px;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: 40px 130px 130px 130px 60px 330px 40px;
}
.header {
grid-column: 1 / -1;
}
.jumbo {
grid-column: 1 / -1;
grid-row: 2 / 5;
}
.panels {
grid-column: 3 / 9;
grid-row: 4 / 6;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.panel1 {
grid-row: 1 / 2;
grid-row: 1;
background-color: white !important;
z-index: 2;
}
.content {
grid-column: 1 / -1;
grid-row: 5 / 7;
}
.footer {
grid-column: 1 / -1;
}
/* Styling */
.container > div {
display: grid;
justify-content: center;
/* align-items: center; */
font-size: 2em;
color: #ffeead;
}
/* new */
.container > div:not(.panels) {
align-items: center;
}
html, body {
background-color: #ffeead;
box-sizing: border-box;
height: 100%;
margin: 0px;
font-family: "Work Sans"
}
.container > div:nth-child(1n) { background-color: #96ceb4; }
.container > div:nth-child(3n) { background-color: #88d8b0; }
.container > div:nth-child(2n) { background-color: #ff6f69; }
.container > div:nth-child(4n) { background-color: #ffcc5c; }
.panels > div:nth-child(1n) { background-color: #96ceb4; }
<div class="container">
<div class="header">HEADER</div>
<div class="jumbo">JUMBO</div>
<div class="panels">
<div class="panel1">PANEL1</div>
<div class="panel2">PANEL2</div>
<div class="panel3">PANEL3</div>
</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
Then, to vertically center the content of .panels, I would target the content directly:
.panels > div {
display: flex;
align-items: center;
}
.container {
display: grid;
width: 100%;
height: 100%;
grid-gap: 3px;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: 40px 130px 130px 130px 60px 330px 40px;
}
.header {
grid-column: 1 / -1;
}
.jumbo {
grid-column: 1 / -1;
grid-row: 2 / 5;
}
.panels {
grid-column: 3 / 9;
grid-row: 4 / 6;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.panel1 {
grid-row: 1 / 2;
grid-row: 1;
background-color: white !important;
z-index: 2;
}
.content {
grid-column: 1 / -1;
grid-row: 5 / 7;
}
.footer {
grid-column: 1 / -1;
}
/* Styling */
.container > div {
display: grid;
justify-content: center;
/* align-items: center; */
font-size: 2em;
color: #ffeead;
}
/* new */
.container > div:not(.panels) {
align-items: center;
}
/* new */
.panels > div {
display: flex;
align-items: center;
}
html, body {
background-color: #ffeead;
box-sizing: border-box;
height: 100%;
margin: 0px;
font-family: "Work Sans"
}
.container > div:nth-child(1n) { background-color: #96ceb4; }
.container > div:nth-child(3n) { background-color: #88d8b0; }
.container > div:nth-child(2n) { background-color: #ff6f69; }
.container > div:nth-child(4n) { background-color: #ffcc5c; }
.panels > div:nth-child(1n) { background-color: #96ceb4; }
<div class="container">
<div class="header">HEADER</div>
<div class="jumbo">JUMBO</div>
<div class="panels">
<div class="panel1">PANEL1</div>
<div class="panel2">PANEL2</div>
<div class="panel3">PANEL3</div>
</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
Keep in mind that there are three structural levels in a grid container:
the container
the item (child of the container)
the content (child of the item)
Grid properties only work between parent and child.
So when you apply grid centering properties on the container, they apply to the item, not the content. To center the content, you need to treat the item as parent and content as child.
There's a more in-depth explanation of these concepts and methods here: Centering in CSS Grid
Well, what you have done is, you created three columns inside the 'panels' div:
grid-template-columns: repeat(3, 1fr);
But you gave the children only a position for the row (twice):
grid-row: 1 / 2;
grid-row: 1;
So if you change 'columns' to 'rows' in '.panels' and clean up the code for '.panel1' it should work like a cham!
Thank you all for your suggestions. I solved the issue by removing the nested 'panel' and simply creating three different panels to fill the same space.
.container {
display: grid;
width: 100%;
height: 100%;
grid-gap: 3px;
grid-template-columns: repeat(13, 1fr);
grid-template-rows: 50px 218px 218px 200px 80px 530px 40px;
}
.header {
grid-column: 1 / -1;
position: sticky;
top: 0;
z-index: 3;
}
.jumbo {
grid-column: 1 / -1;
grid-row: 2 / 5;
}
.panel1 {
background-color: white !important;
z-index: 1;
grid-column: 3 / 6;
grid-row: 4 / 6;
}
.panel2 {
background-color: black !important;
z-index: 1;
grid-column: 6 / 9;
grid-row: 4 / 6;
}
.panel3 {
background-color: purple !important;
z-index: 2;
grid-column: 9 / 12;
grid-row: 4 / 6;
}
.content-left {
grid-column: 1 / 5;
grid-row: 5 / 7;
}
.content-right {
grid-column: 5 / -1;
grid-row: 5 / 7;
display: grid;
grid-gap: 5px;
align-items: start;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr)
}
.content-right > div {
background-color: white;
z-index: 2;
}
.footer {
grid-column: 1 / -1;
}
.container > div {
justify-content: center;
align-items: center;
font-size: 2em;
color: #ffeead;
}
html, body {
background-color: #ffeead;
box-sizing: border-box;
height: 100%;
margin: 0px;
font-family: "Work Sans"
}
.container > div:nth-child(1n) {
background-color: #96ceb4;
}
.container > div:nth-child(3n) {
background-color: #88d8b0;
}
.container > div:nth-child(2n) {
background-color: #ff6f69;
}
.container > div:nth-child(4n) {
background-color: #ffcc5c;
}
.panels > div:nth-child(1n) {
background-color: #96ceb4;
}
<div class="container">
<div class="header">
HEADER
</div>
<div class="jumbo">
JUMBO
</div>
<div class="panel1">PANEL1</div>
<div class="panel2">PANEL2</div>
<div class="panel3">PANEL3</div>
<div class="content-left">
CONTENT-LEFT
</div>
<div class="content-right">
<div class="content-right1">1</div>
<div class="content-right2">2</div>
<div class="content-right3">3</div>
<div class="content-right4">4</div>
<div class="content-right5">5</div>
<div class="content-right6">6</div>
</div>
<div class="footer">
FOOTER
</div>
</div>
I've a CSS Grid, and I'm trying to set the justify-items property to start.
This (or any of the other properties relating to it) aren't working and in my text editor (atom) it is showing as grayed out which usually means an error.
I've looked at the specification and this property is definitely part of the spec and have even found a video tutorial of it working.
When I use it though it doesn't work and I can't get my head around why.
When I have copied the code to codepen it still does not work.
The codepen here: https://codepen.io/emilychews/pen/EvLPgJ
.gridwrapper {
background: #e6e6e6;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-auto-rows: 100px;
grid-row-gap: 10px;
grid-column-gap: 10px;
justify-items: start; /* THIS LINE ISN'T WORKING */
align-items: stretch;
}
.gridwrapper div:nth-child(1) {
grid-column: 1 / 4;
}
.gridwrapper div:nth-child(6) {
grid-column: 1 / 3;
}
.gridwrapper div {
padding: 1em;
background: red;
border: white;
width: 100%;
color: white;
box-sizing: border-box;
}
.gridwrapper div:nth-child(odd) {
background: blue;
}
<div class="gridwrapper">
<div class="grid double-col double-row">1</div>
<div class="grid">2</div>
<div class="grid">3</div>
<div class="grid">4</div>
<div class="grid">5</div>
<div class="grid">6</div>
<div class="grid">7</div>
<div class="grid">8</div>
</div>
The justify-items property aligns grid items by distributing free space in the columns (not the overall container).
In this case, however, there is no free space because each item occupies the full width of the column.
.gridwrapper div { width: 100% }
When you remove that rule, justify-items works.
Here's a more complete explanation:
The difference between justify-self, justify-items and justify-content in CSS Grid
revised codepen
.gridwrapper {
background: #e6e6e6;
display: grid;
grid-template-columns: repeat(8, 25px); /* adjustment; otherwise 1fr... */
grid-auto-rows: 100px; /* all free space */
grid-row-gap: 10px;
grid-column-gap: 10px;
justify-content: end; /* adjustment */
align-items: stretch;
}
.gridwrapper div:nth-child(1) {
grid-column: 1 / 4;
}
.gridwrapper div:nth-child(6) {
grid-column: 1 / 3;
}
.gridwrapper div {
padding: 1em;
background: red;
border: white;
/* width: 100%; */
color: white;
box-sizing: border-box;
}
.gridwrapper div:nth-child(odd) {
background: blue;
}
<div class="gridwrapper">
<div class="grid double-col double-row">1</div>
<div class="grid">2</div>
<div class="grid">3</div>
<div class="grid">4</div>
<div class="grid">5</div>
<div class="grid">6</div>
<div class="grid">7</div>
<div class="grid">8</div>
</div>