I have this simple grid div:
#grid {
height: 200px;
width: 200px;
display: grid;
grid-gap: 10px;
grid-template: repeat(4, 1fr) / repeat(2, 1fr);
}
#item1 {
background-color: lime;
}
#item2 {
background-color: yellow;
}
#item3 {
background-color: blue;
}
#item4 {
background-color: red;
}
#item5 {
background-color: aqua;
}
<div id="grid">
<div id="item1">1</div>
<div id="item2">2</div>
<div id="item3">3</div>
<div id="item4">4</div>
<div id="item5">5</div>
</div>
Why are my items skipping the first column and are placed into the second one?
You have " " characters () before each of your inner <div> elements, which get interpreted as additional new lines, and interfere with your grid layout. Replacing these with regular spaces fixes the problem:
#grid {
height: 200px;
width: 200px;
display: grid;
grid-gap: 10px;
grid-template: repeat(4, 1fr) / repeat(2, 1fr);
}
#item1 {
background-color: lime;
}
#item2 {
background-color: yellow;
}
#item3 {
background-color: blue;
}
#item4 {
background-color: red;
}
#item5 {
background-color: aqua;
}
<div id="grid">
<div id="item1">1</div>
<div id="item2">2</div>
<div id="item3">3</div>
<div id="item4">4</div>
<div id="item5">5</div>
</div>
Related
This question already has answers here:
The difference between percentage and fr units
(3 answers)
Closed 1 year ago.
I've come across an example of grid layout and don't understand why adding grid gap to rows and columns causes the row items to overflow the container (which I understand) but not the column items; instead the container expands with no overflow.
body {
padding: 20px;
}
.grid-container {
border: 5px solid black;
font-family: avenir, sans-serif;
font-weight: bold;
display: grid;
grid-template-columns: repeat(4, 25%);
grid-template-rows: 100px 100px;
gap: 20px;
}
.grid-item {
padding: 10px 20px;
}
.grid-item:nth-child(1) {
background: darkcyan;
}
.grid-item:nth-child(2) {
background: turquoise;
}
.grid-item:nth-child(3) {
background: aquamarine;
}
.grid-item:nth-child(4) {
background: lightgreen;
}
.grid-item:nth-child(5) {
background: mediumseagreen;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
</div>
You should use fr units for that kind of use in grid-template-columns: repeat(4, 1fr);
1fr represent 1 fraction of the available space
body {
padding: 20px;
}
.grid-container {
border: 5px solid black;
font-family: avenir, sans-serif;
font-weight: bold;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 100px;
grid-gap: 20px;
}
.grid-item {
padding: 10px 20px;
}
.grid-item:nth-child(1) {
background: darkcyan;
}
.grid-item:nth-child(2) {
background: turquoise;
}
.grid-item:nth-child(3) {
background: aquamarine;
}
.grid-item:nth-child(4) {
background: lightgreen;
}
.grid-item:nth-child(5) {
background: mediumseagreen;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
</div>
This is what I want to achieve:
On desktop/big screen - 30% of the left side and around 70% of the right side
On mobile/smaller screens - right side goes on top of the left side
Here's what I have so far. I have a feeling I'm using the grid in the right or at least I'm not achieving what I have above...
body {
margin: 40px;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: auto;
grid-template-areas: "sidebar content content content";
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.header {
background-color: #999;
}
#media (max-width: 768px) {
grid-template-rows: repeat(auto, 1fr);
grid-template-areas:
"content"
"sidebar";
}
<div class="wrapper">
<div class="box sidebar">Sidebar</div>
<div class="box content">Content</div>
</div>
What's the best approach to this?
You forget to wrap css in .wrapper class in media query
body {
margin: 40px;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: auto;
grid-template-areas: "sidebar content content content";
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.header {
background-color: #999;
}
#media (max-width: 768px) {
.wrapper {
grid-template-rows: repeat(auto, 1fr);
grid-template-areas:
"content"
"sidebar";
}
}
<div class="wrapper">
<div class="box sidebar">Sidebar</div>
<div class="box content">Content</div>
</div>
jsfiddle link
body {
margin: 40px;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
width: 70%
}
.wrapper {
display: grid;
display: flex;
flex-wrap: wrap;
grid-gap: 10px;
grid-template-columns: auto;
grid-template-areas: "sidebar content content content";
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.header {
background-color: #999;
}
#media (max-width: 768px) {
grid-template-rows: repeat(auto, 1fr);
grid-template-areas:
"content"
"sidebar";
}
#media (max-width: 625px) {
.content {
width: 100%;
}
.sidebar {
width: 100%;
}
}
<div class="wrapper">
<div class="box sidebar">Sidebar</div>
<div class="box content">Content</div>
</div>
First i used flex-wrap to toggle between row and column as per the width of the screen. Then i used media query to change the width of the elements as you want different widths in row and column view.
I am trying out a layout using CSS grid. Inside the header I have a div with a class called logo and I want it vertical aligned.
Here is the full code (View full-screen to see the issue):
html,
body {
height: 100%;
}
.container {
display: grid;
height: 100%;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-template-areas: "h h" "s m" "f f";
grid-gap: 10px;
}
.header {
grid-area: h;
background-color: red;
}
.header .logo {
display: inline-grid;
padding: 5px;
border: 1px solid #ccc;
align-content: center;
}
.sidebar {
grid-area: s;
background-color: grey;
}
.main {
grid-area: m;
background-color: purple;
}
.footer {
grid-area: f;
background-color: blue;
}
<div class="container">
<div class="header">
<div class="logo">
<img src="https://via.placeholder.com/50" alt="">
</div>
</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
I've tried: align-content: center and justify-self: center, but it's not moving from the top.
How can I vertical align class logo in the header using css grid?
Is this what you want to do
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
html,
body {
height: 100%;
}
.container {
display: grid;
height: 100%;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-template-areas: "h h" "s m" "f f";
grid-gap: 10px;
}
.header {
padding: 70px 0; /* this code */
grid-area: h;
background-color: red;
}
.header .logo {
display: inline-grid;
padding: 5px;
border: 1px solid #ccc;
}
.sidebar {
grid-area: s;
background-color: grey;
}
.main {
grid-area: m;
background-color: purple;
}
.footer {
grid-area: f;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
<img src="https://via.placeholder.com/150" alt="">
</div>
</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Other Opsion
.header {
display: table;
overflow: hidden;
height: 500px;
grid-area: h;
background-color: red;
}
.header .logo {
display: table-cell;
vertical-align: middle;
padding: 5px;
border: 1px solid #ccc;
}
This is all you need:
.header .logo {
display: inline-grid;
padding: 5px;
border: 1px solid #ccc; //remove this
align-content: center;
height: 100%; //This will work for responsive screens as well.
}
I have a grid with nested left and right grids. I want my left grid to take full height of the browser and be fixed in position. I want my right grid to get a vertical scroll bar as I add content to it.
body{ margin: 0 0; padding: 0 0 ; }
.grid {
display: grid;
grid-template-columns: 25% 75%;
grid-gap: 10px;
grid-auto-rows: 500px;
}
.left{
display: grid;
grid-template-rows : repeat(3,1fr);
grid-gap : 5px;
grid-auto-rows: 500px;
}
.one{ background: violet; }
.two{ background: indigo; }
.three { background: blue; }
.right{
display: grid;
grid-template-rows: repeat(4,1fr);
grid-gap : 5px;
}
.four{ background: green; }
.five{ background: yellow; }
.six { background: orange; }
.seven{ background: red}
<body>
<div class="grid">
<div class="left">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
<div class="right">
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
<div class="seven">7</div>
</div>
</div>
</body>
How do you plan to get the left grid to occupy full height and remain fixed if you have grid-auto-rows: 500px? This will overflow the container in many cases.
Here's a revised version of your code, with a fixed left-side grid, and grid-auto-rows: 500px with overflow: auto on the right-side grid.
.grid {
display: grid;
grid-template-columns: 1fr 3fr; /* switched from percentages for spacing efficiency */
grid-gap: 10px;
/* grid-auto-rows: 500px; */
height: 100vh; /* new */
}
.left {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-gap: 5px;
/* grid-auto-rows: 500px; */
}
.right {
display: grid;
/* grid-template-rows: repeat(4, 1fr); */
grid-gap: 5px;
grid-auto-rows: 500px; /* new */
overflow: auto; /* new */
}
.one { background: violet; }
.two { background: indigo; }
.three { background: blue; }
.four { background: green; }
.five { background: yellow; }
.six { background: orange; }
.seven { background: red }
body { margin: 0 0; padding: 0 0; }
<div class="grid">
<div class="left">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
<div class="right">
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
<div class="seven">7</div>
</div>
</div>
I'm experimenting with css grid and i'm trying to make a simple example, but it does not seem to work on IE11 although i use the appropriate syntax:
.grid {
background: gold;
height: 90vh;
display: -ms-grid;
display: grid;
grid-gap: 20px;
-ms-grid-columns: 405px 1fr;
grid-template-columns: 405px 1fr;
grid-template-rows: 1fr;
-ms-grid-rows: 1fr;
}
section {
background: red;
}
<div class="grid">
<section>
section1
</section>
<section>
section2
</section>
</div>
Apparently you need to explicitly set the location of each element of the grid, so for the example in the question, you'll need to do this:
<div class="grid">
<section class="s1">
section1
</section>
<section class="s2">
section2
</section>
</div>
.s1 {
padding: 20px;
background: red;
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.s2 {
padding: 20px;
background: green;
-ms-grid-row: 1;
-ms-grid-column: 2;
}
Doing it manually can be very tedious, but if you use grid-template-areas, autoprefixer will automatically render it for you.
So the final example looks like this:
.grid {
grid-template-areas: "s1 s2";
background: gold;
height: 500px;
display: -ms-grid;
display: grid;
grid-gap: 20px;
-ms-grid-columns: 405px 1fr;
grid-template-columns: 405px 1fr;
grid-template-rows: 1fr;
-ms-grid-rows: 1fr;
}
.grid .grid{
height: 300px;
}
.s1 {
padding: 20px;
background: red;
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: s1;
}
.s1 .s1 {
background: teal;
}
.s2 {
padding: 20px;
background: green;
-ms-grid-row: 1;
-ms-grid-column: 2;
grid-area: s2;
}
.s2 .s2 {
background: yellow;
}
section section {
background: green;
}
<div class="grid">
<section class="s1">
section1
</section>
<section class="s2">
<div class="grid">
<section class="s1">
nested-section1
</section>
<section class="s2">
nested-section2
</section>
</div>
</section>
</div>