I'm trying to modify grid I using grid from https://www.w3schools.com/ but I tried but it was not working help me to create grid.
i need this grid in below code
this code I copied from w3schools link https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_layout_named
code
<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Grid Layout</h1>
<p>This grid layout contains six columns and three rows:</p>
<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>
Related
I essentially have a table that displays data from a database. I am using bootstrap to assist the design of the website. Here is a screenshot that shows the issue: https://imgur.com/a/FV7UFhn
Here is the HTML:
http://pastie.org/p/2mPG3zE7b6AdHOuoJrMDZV
Here is the relevant CSS:
http://pastie.org/p/14nCCfRGIA4WrFLXrFqNWe
I sent them using pastie.org as they are probably too big to paste into stackoverflow
I recommend you use css flex for the base template of your site if it's a one dimensional array layout (e.g single colimn head, body, foot).
html,
body {
min-height: 100%;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
header {
background: #eee;
flex: 0 0 50px;
}
main {
background: #aaa;
flex: 1;
}
footer {
background: #888;
flex: 0 0 100px;
}
<div class="container">
<header>
HEAD
</header>
<main>
BODY
</main>
<footer>
FOOT
</footer>
</div>
If it is a two dimensional array (e.g contains sidebars) then I recommend using css grid for the base template.
HOLY GRAIL EXAMPLE
.container {
display: grid;
grid-template-areas: "header header header" "nav content side" "footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
header {
background: #eee;
grid-area: header;
}
nav {
background: #888;
grid-area: nav;
}
main {
background: #aaa;
grid-area: content;
}
aside {
background: #888;
grid-area: side;
}
footer {
background: #bbb;
grid-area: footer;
}
<div class="container">
<header>
HEAD
</header>
<nav>
NAV
</nav>
<main>
BODY
</main>
<aside>
SIDE
</aside>
<footer>
FOOT
</footer>
</div>
How can I make a div that overrides all the template areas and goes to the front, so that the item6 will be displaying in front of all the other items.
I tried to with grid-row-start and grid-row-end but it doesn't seem to work
<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.item6 { grid-row-start: 0;
grid-row-end: 6}
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</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 class="item6">Override everything</div>
</div>
</body>
</html>
There is no grid-column-start: 0 they all start with 1.
Also you have to specify the grid-columns to be covered.
<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
grid-area: header;
}
.item2 {
grid-area: menu;
}
.item3 {
grid-area: main;
}
.item4 {
grid-area: right;
}
.item5 {
grid-area: footer;
}
.item6 {
grid-row-start: 1;
grid-row-end: 6;
grid-column-start: 1;
grid-column-end: -1
}
.grid-container {
display: grid;
grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</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 class="item6">Override everything</div>
</div>
</body>
</html>
This question already has answers here:
CSS 100% height with padding/margin
(15 answers)
100% width minus margin and padding [duplicate]
(6 answers)
Closed 1 year ago.
I've got a grid layout. I want to add a 5px margin all around it but doing so adds a scrollbar.
Is it possible to set a margin without having a scrollbar added?
function toggle() {
document.querySelector(".container").classList.toggle("withMargin");
}
html,
body,
.container {
height: 100%;
margin: 0;
}
.container {
display: grid;
grid-template-rows: 50px 1fr 1fr;
grid-template-columns: 300px 1fr 1fr;
gap: 5px 5px;
grid-auto-flow: row;
grid-template-areas: "logo header header" "nav-one main main" "nav-two main main";
background-color: black;
}
.main {
grid-area: main;
background-color: lightcoral;
}
.logo {
grid-area: logo;
background-color: lightcyan;
}
.header {
grid-area: header;
background-color: lightgoldenrodyellow;
}
.nav-one {
grid-area: nav-one;
background-color: lightgray;
}
.nav-two {
grid-area: nav-two;
background-color: lightgreen;
}
.container.withMargin {
margin: 5px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="main">
<br /><button onclick="toggle()">toggle .container margin</button>
</div>
<div class="logo">logo</div>
<div class="header">header</div>
<div class="nav-one">nav one</div>
<div class="nav-two">nav two</div>
</div>
</body>
</html>
Use padding instead of margin for selector .container.withMargin:
.container.withMargin {
padding: 5px;
}
And add box-sizing: border-box for the .container selector.
function toggle() {
document.querySelector(".container").classList.toggle("withMargin");
}
html,
body,
.container {
height: 100%;
margin: 0;
}
.container {
display: grid;
grid-template-rows: 50px 1fr 1fr;
grid-template-columns: 300px 1fr 1fr;
gap: 5px 5px;
grid-auto-flow: row;
grid-template-areas: "logo header header" "nav-one main main" "nav-two main main";
background-color: black;
box-sizing: border-box;
}
.main {
grid-area: main;
background-color: lightcoral;
}
.logo {
grid-area: logo;
background-color: lightcyan;
}
.header {
grid-area: header;
background-color: lightgoldenrodyellow;
}
.nav-one {
grid-area: nav-one;
background-color: lightgray;
}
.nav-two {
grid-area: nav-two;
background-color: lightgreen;
}
.container.withMargin {
padding: 5px;
}
<!DOCTYPE html>
<html>
<head> </head>
<body>
<div class="container">
<div class="main">
<br />
<button onclick="toggle()">toggle .container margin</button>
</div>
<div class="logo">logo</div>
<div class="header">header</div>
<div class="nav-one">nav one</div>
<div class="nav-two">nav two</div>
</div>
</body>
</html>
I want help on how can i create vertical border like in in sample image.
Try to use CSS Grid
https://css-tricks.com/snippets/css/complete-guide-grid/
I wrote this code to show you how would be look grid on your template website
.item1 { grid-area: header; }
.item2 { grid-area: left; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'left header header header header right'
'left main main main main right'
'left footer footer footer footer right';
grid-gap: 10px;
background-color: #2196F3;
padding: 7px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 40px 0;
font-size: 30px;
}
<!DOCTYPE html>
<html>
<body>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Left</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
</html>
I have a grid with a header, nav, content, footer, and space for ads on the side. I am trying to color code each area for now so I can visually see what I am doing and I can't seem to get the header to change color. Every other section is being changed just fine. Not only can I not change the background of the section, but I can't change the text color, or change anything it seems. Thanks for all of the help and here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<style>
* {
font-family: Arial;
box-sizing: border-box;
}
body {
margin: 0;
}
#grid-container {
background-color: lightgray;
display: grid;
grid-template-columns: 15% 42.5% 42.5%;
grid-template-rows: 20% 15% 45% 20%;
grid-template-areas:
"header header header"
"nav nav nav"
"advert content content"
"advert footer footer";
}
#header {
background-color: yellow;
grid-area: header;
}
#nav {
background-color: purple;
grid-area: nav;
}
#content {
background-color: blue;
grid-area: content;
}
#advert {
background-color: green;
grid-area: advert;
}
#footer {
background-color: red;
grid-area: footer;
}
</style>
</head>
<body>
<div id="grid-container">
<head id="header">
header
</head>
<nav id="nav">
nav
</nav>
<main id="content">
content
</main>
<aside id="advert">
advert
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</aside>
<footer id="footer">
footer
</footer>
</div>
</body>
</html>
You are using an <head> when you probably meant to use <header>.