I got a problem with CSS Grid (I just started learning it). When I type the values of my grid-template-rows: in em, it works perfectly. But if I use percentage, all rows are all same height. I used to give them: 10% 80% 10% for: header, main, footer, but for some reason they are all same big. It makes no different if I change the Wrapper height(grid container element) from % to em or whatsoever. Here's my code:
#Wrapper {
display: grid;
grid-template-columns: 20% 60% 20%;
grid-template-rows: 10% 80% 10%;
min-height: 20em;
grid-template-areas:
"header header header"
"main main main"
"footer footer footer"
}
header {
background-color: #593093;
grid-area: header;
}
main {
background-color: #2AABBB;
grid-area: main;
}
footer {
background-color: #2F6692;
grid-area: footer;
}
h3 {
margin: 0;
}
<div id="Wrapper">
<header>
<h3>Header</h3>
</header>
<main>
<h3>Main</h3>
</main>
<footer>
<h3>Footer</h3>
</footer>
</div>
It is because your #Wrapper doesn't have a specified height or parent height. You can't use % as unit when the parent's height is not specified. Height in em is working since em is a absolute unit relative to parent px.
Define the height of the #Wrapper will be good to go.
#Wrapper{
height: 500px;
}
https://codepen.io/anon/pen/KrMwQM
Related
I'm currently making a NextJS app which should have a fullscreen layout that does not change regardless of zoom level. At default zoom level, you see the header, footer, toolbar, and vertically-scrollable content window
When you zoom out, the size of the header, footer, toolbar, and content window remain fixed even if the content inside them changes size
Note that there are multiple types of toolbars and content windows that may be shown depending on what the user selects. I've been able to get a header and footer working by editing _app.js, but the toolbar and content window are not taking up the full remaining space if I zoom out because there is some extra div that is injected by NextJS at some point. I'm using inline styling with material UI.
Has anyone run into this issue before?
This is one approach you could use for your layout, using CSS Grid. I'm defining the grid to have 12 columns, but you could set it up in any way you'd like.
Note, the following block means, start from the 3rd grid line and span to the end of the grid. This will satisfy your horizontal space requirements.
main .main-content {
grid-column: 3 / -1;
}
For the center column taking up the maximum space of the viewport, I'm using the following:
grid-template-rows: auto 1fr auto;
The first auto is the header, the 1fr is the middle section (most room), and the last auto is the footer.
Here's a demo.
.grid {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
min-height: 100dvh;
gap: 0.5rem;
padding: 0.5rem;
}
main {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 0.5rem;
}
main aside {
grid-column: 1 / 3;
}
main .main-content {
grid-column: 3 / -1;
}
header, main aside, .main-content, footer {
background-color: #eee;
}
header,
footer,
main :where(aside, .main-content) { padding: 0.5rem;}
html, body { padding: 0; margin: 0; }
*, *::before, *::after {
box-sizing: border-box;
}
<div class="grid">
<header>header</header>
<main>
<aside>aside</aside>
<div class="main-content">main content</div>
</main>
<footer>footer</footer>
</div>
Is it possible to set a css grid row height based on if the grid area is being used?
.container {
height: 100vh;
grid-template-areas:
"mobile-head mobile-head mobile-head"
"nav app app"
"footer footer footer";
}
.nav {
grid-area: nav
}
<div class="container">
<div class="nav">Nav stuff</div>
</div>
Given the above grid template and html, I see the Nav stuff in the nav area, but naturally the mobile nav area is taking a 1/3rd of the screen height. Because there is no div that has a grid-area: mobile-head I want the height to be 0px.
But if I change the .nav to
...
.nav {
grid-area: mobile-head
}
I would want the row to be a fixed height of say 200px.
I can get close. I can get the row to have a height of 0 when there is nothing in the mobile-area by doing this:
...
grid-template-rows: minmax(0px, auto) 1fr 1fr
But then the height is dictated by the content, rather than the grid.
I'm fairly sure the only alternative to achieve what im trying to do is to use 2 grids, and media queries. (I want to place the nav on the left for desktop, or top if mobile)
I think grid-auto-rows: min-content is what you're after.
<button class="toggle" style="margin-bottom:1em">Toggle hidden row</button>
<div class="container">
<div class="nav">Nav stuff</div>
</div>
<style>
.container {
box-shadow: inset 0 0 0 1px lightgray;
background-color: #fafafb;
display: grid;
height: 100vh;
grid-auto-rows: min-content;
grid-template-areas:
"mobile-head mobile-head mobile-head"
"nav app app"
"footer footer footer";
}
.nav {
grid-area: nav;
background-color: lightblue;
}
.nav.mobile {
grid-area: mobile-head;
}
</style>
<script>
document.querySelector('.toggle').onclick = function(){
document.querySelector('.nav').classList.toggle('mobile');
};
</script>
I am trying to come up with a solution for advanced layout. I decided to use a css grid as it seemed to be the best match for my needs.
The requirements:
Header - consists of three elements - logo, search bar and menu
search bar should be aligned with the main content if space allows, i.e. on small screen search bar doesn't need to start where the main content starts but it should end where main content ends or take all available space
Main - consists of content and sidebar- should be centred and take max 100rem width space
content should be 2 times bigger than the sidebar
main content should have at least 1rem space from left and right
This is how it looks now. It matches my requirements on big screens (4k) but when the screen gets smaller it gets messy. I would really like to avoid any javascript and solve this with pure CSS if possible.
How would you approach this problem? I am now more inclining that this is not solvable with pure CSS and JS is needed. (Probably some resize observer on main-content element)
Examples:
Big screen -> alignment is correct ✔️
Small screen -> alignment is not correct. ❌ The search box should be within the black "brackets"
Even smaller screen -> alignment is not correct too. ❌ The search box should expand up to the black line
html,
body {
padding: 0;
margin: 0;
}
body {
font-family: sans-serif;
display: grid;
grid-template-columns: minmax(1rem, 1fr) minmax(min-content, 100rem) minmax(
1rem,
1fr
);
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
". main .";
min-height: 100vh;
}
.header {
padding: 1rem 1rem;
background: green;
grid-area: header;
display: grid;
grid-template-columns: minmax(max-content, 1fr) minmax(min-content, 100rem) minmax(
max-content,
1fr
);
}
.search-box {
background: yellow;
max-width: calc(2/3 * 100%);
}
.logo {
background: yellowgreen;
min-width: 5rem;
}
.menu {
background: brown;
}
.main {
grid-area: main;
display: flex;
}
.main-content {
background: red;
flex: 2;
}
.sidebar {
background: blue;
flex: 1;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="header">
<div class="logo">Logo</div>
<div class="search-box">
Search box should should match main content position
</div>
<div class="menu">Menu with two submenus at least</div>
</header>
<main class="main">
<section class="main-content">Main content</section>
<aside class="sidebar">Sidebar</aside>
</main>
</body>
</html>
Sandbox available here
This is something that I've been struggling with for a while, but I can't seem to find a way to do it.
If you have an odd number of items in grid and you want 2 items per row (1fr 1fr), you end up with a single item in the last row that is left-centered.
I just want to make it centered so it looks nicer.
Here's a picture too.
You can try something like this jsfiddle:
/* visibility properties */
body {
width: 60%;
margin: 5% auto;
}
div {
margin: 3%;
width: 100px;
height: 100px;
background-color: black;
justify-self: center;
}
div:nth-of-type(2n) {
background-color: red;
}
/* actual code: */
section {
display: grid;
grid-template-columns: 1fr 1fr;
}
#last-div {
grid-column: 1 / span 2;
}
<section>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div id="last-div">
</div>
</section>
Get more info on CSS Grid: complete-guide-grid
You could try something like this since I faced a similar issue in one of my earlier projects.
grid-template-columns : repeat(auto-fit, minmax(<minSize>, 1fr));
Set minSize to whatever minimum width you want an element to occupy.
Is there a way to stick the footer on a page to the bottom of the body content is shorter? I mean if the body content will be longer the footer should be displayed at the end of the whole content. The usage of the layout is not acceptable.
I tried:
.my-footer {
min-height: 1vp -heightOfHeader - heightOfFooter;
}
But I wish to get the values dynamically without JS. Only using CSS. Is it possible?
I don't know what you mean by "The usage of the layout is not acceptable", but one way to achieve this is to use grid display.
body, html {
margin: 0;
}
body {
min-height: 100vh;
display: grid;
grid-template-rows: 1fr auto;
}
.main-content {
grid-row: 1 / 2;
}
footer {
grid-row: 2 / 3;
}
<div class="main-content">Main content</div>
<footer>footer</footer>