I want to make the site like the picture
(https://i.stack.imgur.com/rFj7L.jpg)
and because Im new I cant. Can you help me?
With CSS grid this is pretty easy to do!
https://www.w3schools.com/css/css_grid.asp
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'footer footer footer footer footer footer';
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
</html>
Use Bootstrap, it is an easy way to achieve your desired layout and many other layout options. It is free and very popular. It is used by professional developers, so you will also learn about industry level solutions. And great for beginners especially!
Related
I was trying to use the code below, but it did not work. I wanted to use the grid to define the whole webpage layout on every page I make. It seems like it is not that simple, because it seems like the grid accepts only a simpler flow of elements like this one:
The layout that the grid won't accept:
header just row one and column one
"right div element" row 2/3 and column 2/3
that is what I wanted.
I wanted to achieve that with this code:
<html>
<head>
<style>
body,
html {
margin: 0;
height: 100%;
width: 100%;
}
.main {
width: 100%;
height: 100%;
display: grid;
grid-template-rows: 120px 1fr 120px;
grid-template-columns: 200px 1fr auto;
}
.main footer {
grid-column: 1/3;
grid-row-start: 3;
background: #949994;
}
.main .header {
grid-column-start: 1;
grid-row-start: 1;
background: #034f84;
}
.main .right {
grid-row: 1/2;
grid-column: 2/3;
text-align: center;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="main">
<header>
</header>
<div class="right">
</div>
<footer>
</footer>
</div>
</body>
</html>
I'm trying to make a simple layout as I'm learning CSS Grid.
The layout should be as follows:
"header header header"
"adv content content"
"adv footer footer"
What I'm getting is this:
"header header header"
"adv content content"
". footer footer"
The div "adv" never takes the vertical space, doesn't matter if I do it using template-areas as above or using grid-row and columns as the code below.
In fact, I'm not able to manipulate any of my divs vertically. I cannot make them span several rows. Can somebody maybe tell me what I'm doing wrong?
body {
background: dimgray;
}
div {
height: 200px;
font-size: 50px;
font-family: sans-serif;
color: floralwhite;
}
.header {
background-color: lightcoral;
grid-column: 1 / 4;
}
/*Div having the issue below*/
.adv {
background-color: blue;
grid-row: 2/4;
/*Expecting to span from row 2 to 4, but not happening.*/
}
/*Div having the issue above*/
.content {
background: pink;
grid-column: 2/4;
}
.footer {
background-color: salmon;
grid-column: 2/4;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
<body>
<div class="container">
<div class="header">header
</div>
<div class="adv">adv
<!--Div with the issue-->
</div>
<div class="content">content
</div>
<div class="footer">footer</div>
</div>
</body>
Your grid layout is fine, the problem is with: div {height: 200}, remove the height and it will work as expected.
You forced the height of all divs to be the same. This of course means adv can't be as big as two divs. So try this, if you still need the a minimum height on all divs (or just remove hight all together):
div {
min-height: 200px; /* min/max-height is preferred to `height` for flexible layouts like grid and flex-box. */
font-size: 50px;
font-family: sans-serif;
color: floralwhite;
}
body {
background: dimgray;
}
div {
min-height: 200px; /* height means that all divs will be the same hieght which prevents the layout you want. Min-height is more correct here. */
font-size: 50px;
font-family: sans-serif;
color: floralwhite;
}
.header {
background-color: lightcoral;
grid-column: 1 / 4;
}
/*Div having the issue below*/
.adv {
background-color: blue;
grid-row: 2/4;
/*Expecting to span from row 2 to 4, but not happening.*/
}
/*Div having the issue above*/
.content {
background: pink;
grid-column: 2/4;
}
.footer {
background-color: salmon;
grid-column: 2/4;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
<body>
<div class="container">
<div class="header">header
</div>
<div class="adv">adv
<!--Div with the issue-->
</div>
<div class="content">content
</div>
<div class="footer">footer</div>
</div>
</body>
try:
div.container {
display: grid;
grid-template-areas: 'h h h' 'a c c' 'a f f';
}
.header { grid-area: h; }
...
templates columns and rows can only draw simples tables.
template-area permitt to customise the display.
My goal is to break my screen in four different blocks that are not the same size, just like in the picture (block one and two should be the same size). I tried using bootstrap which kinda works but it makes it scrollable and I want to avoid that. Is there a way to make it not scrollable and have each block in a fixed size? Any tips would be appreciated. I'm using bootstrap and angularjs.
This is what I have so far, but I want to make full screen.
https://codepen.io/BrunoTrax/pen/XWWVNgL
<style>
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: [col1-start] 100px [col2-start] 100px [col3-start] 100px [col3-end];
grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.a {
grid-column: col1-start / col3-start;
grid-row: row2-start ;
}
.b {
grid-column: col3-start ;
grid-row: row1-start / row2-end;
}
.c {
grid-column: col1-start;
grid-row: row1-start ;
}
.d {
grid-column: col2-start ;
grid-row: row1-start ;
}
</style>
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
</div>
You should check out CSS "Grid's". Basically, you can declare a grid inside your css and use the grid-template-columns property to display your blocks in various arrangements. Here is a good resource that shows you how to create a custom layout.
The grid property also allows you to declare a height and width which will fix your scrolling problem.
Check this out and start experamenting.
CSS
.grid {
display: grid;
width: 100%;
height: 250px;
grid-template-areas: "head head"
"nav main"
"nav foot";
grid-template-rows: 50px 1fr 30px;
grid-template-columns: 150px 1fr;
}
.grid > header {
grid-area: head;
background: #eee;
}
.grid > navLeft {
grid-area: nav;
background-color: #a072;
}
.grid > main {
grid-area: main;
background-color: #8510ff;
}
.grid > footer {
grid-area: foot;
background-color: #8cffa0;
}
HTML
<header> Hello</header>
<navLeft> Hello</navLeft>
<main> Hello</main>
<p> Hello</p>
<p> Hello</p>
</div> ```
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I'm not understanding why the footer is not filling the entire bottom of the screen. Note: if I try to extend aside into that corner instead of footer it will also leave that are blank. Just refuses to fill that area with content. My project consists only of the css and html I have shown here. It behaves the same in chrome.
HTML:
<body>
<div class="container">
<header> header</header>
<main>main</main>
<aside>aside</aside>
<footer>footer</footer>
</div>
</body>
CSS:
.container {
height: 100vh;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
grid-template-areas: "header header" "main aside" "footer footer";
}
header {
grid-area: header;
background-color: teal;
}
main {
grid-area: main;
background-color: lightblue;
}
aside {
grid-area aside;
background-color: green;
}
footer {
grid-area footer;
background-color: gray;
}
Result:
firefox
firefox css grid prop
You forgot the colon in your css. It should be grid-area: footer; except you had grid-area footer;. It's fixed now in the snippet below for you. You did the same thing for aside as well. I fixed that in the snippet for you.
.container {
height: 100vh;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
grid-template-areas: "header header" "main aside" "footer footer";
}
header {
grid-area: header;
background-color: teal;
}
main {
grid-area: main;
background-color: lightblue;
}
aside {
grid-area: aside;
background-color: green;
}
footer {
grid-area: footer;
background-color: gray;
}
<body>
<div class="container">
<header> header</header>
<main>main</main>
<aside>aside</aside>
<footer>footer</footer>
</div>
</body>
Hi Guys I need help displaying layout in CSS. Here is i want the layout to display like.
Here is what i have so far in CSS but can't get the menu zone to fully expand down height. Any suggestions? i'm using display grid as layout.
.page{
display: grid;
grid-template-columns:29% 71%;
justify-content: flex-start;
align-content: start;
}
.section-header{
grid-column: 1/3;
display:grid
grid-row:row;
background-color:blue;
color:#fff;
}
.zone-menu-wrapper{
grid-row:1/3;
background-color:#286dc5;
}
.zone-topper-wrapper{
grid-row:1/3;
}
.section-main{
grid-column:2/3;
background-color:orange;
}
.section-footer{
grid-column: 2/3;
background-color:yellow;
}
.zone-branding-wrapper{
grid-column:2/3;
}
.zone-menu{
width:29%;
display:inline-block;
}
<div class="page">
<header class="section-header">
<div class="zone-topper-wrapper">Top Zone</div>
<div class="zone-menu-wrapper">Menu Zone</div>
</header>
<main class="section-main">
<div class="zone-branding-wrapper">Branding Zone</div>
<div class="zone-content-wrapper">Content Zone</div>
</main>
<footer class="section-footer">
<div class="zone-footer-wrapper">Footer Zone</div>
</footer>
</div>
</pre>
Here's a flexbox solution that will give you greater support than grid columns. If you don't like flexbox you can always use a float based solution which would have even greater support.
I won't go into a lot of detail but the key takeaways are:
flex-grow, tells the element to take up the remaining space of it's parent element. Very handy for stretching elements out to unknown widths, also flexible.
min-height: 100vh in body, this allows the layout to take up the full viewport if their is not enough content to fill it. This also provides a context in which flex-grow can grow into. Without min-height: 100vh; flex-grow doesn't have any space to stretch elements out in.
100vh for min-height, uses viewport units to establish the minimum height the body element can be. 100vh, says use 100% of vertical height (vh) of viewport.
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh;
}
.wrap {
display: flex;
flex-direction: row;
flex-grow: 1;
background-color: indianred;
}
.content {
display: flex;
flex-direction: column;
flex-grow: 1;
}
header {
background-color: darkseagreen;
}
aside {
background-color: skyblue;
}
main {
flex-grow: 1;
background-color: gold;
}
<header>
Header
</header>
<div class="wrap">
<aside>
Sidebar
</aside>
<div class="content">
<main>
Main
</main>
<footer>
Footer
</footer>
</div>
</div>
with grid, you may use just the minimal semantic markup needed:
body {
display: grid;
grid-template-columns: 29% 71%;
grid-template-rows: auto 1fr auto;
grid-template-areas: "header header" "nav main" "nav footer";
height: 100vh
}
header {
grid-area: header ;
}
nav {
grid-area: nav ;
grid-column: 1;
}
main,
footer {
grid-column: 2;/* or grid-area for each of them */
}
/*makup*/
header,
nav {
background: tomato;
}
main {
background: turquoise
}
footer {
background: orange;
}
body>* {
padding:1em;
box-shadow:0 0 1px
}
<header>header</header>
<nav> nav </nav>
<main> main</main>
<footer>footer</footer>
<div class="page">
<header class="section-header">
<div class="zone-topper-wrapper">Top Zone</div>
</header>
<div class="zone-menu-wrapper">Menu Zone</div>
<main class="section-main">
<div class="zone-branding-wrapper">Branding Zone</div>
<div class="zone-content-wrapper">Content Zone</div>
</main>
<footer class="section-footer">
<div class="zone-footer-wrapper">Footer<br> Zone</div>
</footer>
</div>
CSS
.page{
display: grid;
grid-template-columns:29% 71%;
justify-content: flex-start;
align-content: start;
}
.section-header{
grid-column: 1/3;
display:grid
grid-row:row;
background-color:blue;
color:#fff;
}
.zone-menu-wrapper{
grid-row:2/4;
background-color:#286dc5;
}
.zone-topper-wrapper{
grid-row:1/3;
}
.section-main{
grid-column:2/3;
background-color:orange;
}
.section-footer{
grid-column: 2/3;
background-color:yellow;
}
.zone-branding-wrapper{
grid-column:2/3;
}
.zone-menu{
width:29%;
display:inline-block;
}
https://codepen.io/ak472526/pen/dvLaGX