So I have a html and css with a specific grid, I already made the .css, but I'm missing something, normally its the col-md or col-sm into the html using bootstraps, but everytime that I tried still not working for all devices, can anyone helpe me?
.container { display: grid;
grid-template-columns: 285px 285px 285px 400px;
grid-template-rows: 142px 296px 259px 333px;
grid-auto-rows: 1fr;
gap: 5px 5px;
grid-auto-flow: row;
grid-template-areas:
"A B C D"
"E B C D"
"F G H D"
"I I I I";
width: 1440px;
height: 1239px;
}
.A {
grid-area: A;
width: 259px;
height: 122px;
}
.B {
grid-area: B;
width: 259px;
height: 416px;
}
.C {
grid-area: C;
width: 259px;
height: 416px;
}
.D {
grid-area: D;
width: 380px;
height: 668px;
}
.E {
grid-area: E;
width: 259px;
height: 273.87px;
}
.F {
grid-area: F;
width: 259px;
height: 230px;
}
.G {
grid-area: G;
width: 259px;
height: 230px;
}
.H {
grid-area: H;
width: 259px;
height: 230px;
}
.I {
grid-area: I;
width: 1252px;
height: 335px;
}
html, body {
height: 100%;
margin: 0;
}
.container * {
border: 1px solid red;
position: relative;
}
.container *:after {
content:attr(class);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: grid;
align-items: center;
justify-content: center;
}
#media (min-width: 575.98px) {
.container { grid-template-columns: repeat(1, 1fr); }
}
#media (min-width: 767.98px) {
.container { grid-template-columns: repeat(2, 1fr); }
}
#media (min-width: 991.98px) {
.container { grid-template-columns: repeat(2, 1fr); }
}
#media (min-width: 1199.98px) {
.container { grid-template-columns: repeat(3, 1fr); }
}
#media (min-width: 1399.98px) {
.container { grid-template-columns: repeat(4, 1fr); }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>This is a example</title>
<link rel="stylesheet" type="text/css" href="/dashboard.css">
</head>
<body>
<section class="content">
<div class="container">
<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
<div class="E"></div>
<div class="F"></div>
<div class="G"></div>
<div class="H"></div>
<div class="I"></div>
</div>
</section>
</body>
</html>
Id tried to use col-sm-3 col-md-3 col-lg-3 col-xl-3 into html but didnt work;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
grid-auto-rows: 100px;
gap: 5px;
width: 100%;
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
}
.container * {
border: 1px solid red;
}
#media (max-width:1200px) {
.container {
grid-template-columns: 1fr 1fr 1fr;
}
}
#media (max-width:1000px) {
.container {
grid-template-columns: 1fr 1fr ;
}
}
#media (max-width:600px) {
.container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<section class="content">
<div class="container">
<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
<div class="E"></div>
<div class="F"></div>
<div class="G"></div>
<div class="H"></div>
<div class="I"></div>
</div>
</section>
</body>
</html>
Related
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>
Hope you are all doing great.
I have this code, the header menu sort of work but for some reasons the space between each title is off, I quite tried everything, align-center,self,content , justify-content ... but nothing seems to work, where I am failing ?
I have no idea if it's either Home or Contacts that spacing is completely off
thank you for helping
#import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght#500&display=swap');
body {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a, u {
text-decoration: none;
}
.wrapper {
min-height: 100vh;
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-rows: auto;
grid-template-areas:
"header"
"main"
"footer";
}
.page-header {
grid-area: header;
height: 12.5vh;
width: 100vw;
background-color: rgb(214, 214, 214);
}
.grid-header {
display: grid;
grid-template-columns: repeat(3, 50px);
grid-template-rows: 2.5em;
display: grid;
justify-content: center;
}
#ph-home {
grid-column: 1/3;
grid-row: 2/3;
}
#ph-blog {
grid-column: 2/3;
grid-row: 2/3;
}
#ph-contacts {
grid-column: 3/3;
grid-row: 2/3;
}
#ph-home>a, #ph-blog>a, #ph-contacts>a {
font-family: 'Ubuntu', sans-serif;
font-size: 120%
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/home.css">
</head>
<body>
<div class="wrapper">
<header class="page-header">
<ul class="grid-header">
<li id="ph-home">
Home
</li>
<li id="ph-blog">
Blog
</li>
<li id="ph-contacts">
Contacts
</li>
</ul>
</header>
</div>
</body>
</html>
You can specify your columns and rows in fractions and force them to take up that percentage of the width of their parents along with grid-template-areas: "#ph-home #ph-blog #ph-contacts" and grid-area on the children. Then add a display: flex on the children of the grid to give them a justify-content property. This will ensure everything is spaced out nicely with no need to add a gap statically in pixels.
On your grid parent:
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "#ph-home #ph-blog #ph-contacts";
On your grids children:
#ph-home {
display: flex;
justify-content: center;
grid-area: #ph-home;
}
#import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght#500&display=swap');
body {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a,
u {
text-decoration: none;
}
.wrapper {
min-height: 100vh;
display: grid;
gap: 50px;
grid-template-columns: repeat(3, auto);
grid-template-rows: auto;
grid-template-areas: "header" "main" "footer";
}
.page-header {
grid-area: header;
height: 12.5vh;
width: 100vw;
background-color: rgb(214, 214, 214);
}
.grid-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "#ph-home #ph-blog #ph-contacts";
}
#ph-home {
display: flex;
justify-content: center;
grid-area: #ph-home;
}
#ph-blog {
display: flex;
justify-content: center;
grid-area: #ph-blog;
}
#ph-contacts {
display: flex;
justify-content: center;
grid-area: #ph-contacts;
}
#ph-home>a,
#ph-blog>a,
#ph-contacts>a {
font-family: 'Ubuntu', sans-serif;
font-size: 120%
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/home.css">
</head>
<body>
<div class="wrapper">
<header class="page-header">
<ul class="grid-header">
<li id="ph-home">
Home
</li>
<li id="ph-blog">
Blog
</li>
<li id="ph-contacts">
Contacts
</li>
</ul>
</header>
</div>
</body>
</html>
Try this in the 'header'
display:flex;
justify-content: center;
In the main class there's grid-template-rows: 1fr 1fr which divides the whole section in half (sidebar and content classes are nested in that main class element). However, after reaching 900px it leaves an empty space and stays at the top of the section leaving the other half empty.
I'd like the main section to fill up the remaining space after reaching that certain breakpoint and I'm stuck.
This is a big one and this might land me the first internship ever, so I'd be really grateful if somebody helped me find a solution!
body {
margin: 0;
padding: 0;
min-height: 100vh;
box-sizing: border-box;
}
.header,
.footer {
height: 100px;
background-color: #1A1C22;
}
.sidebar {
background-color: #6C757D;
}
.content__box {
background-color: #343A40;
}
.content {
display: grid;
grid-gap: 15px;
}
.main {
min-height: 400px;
height: calc(100vh - 200px);
display: grid;
grid-template-rows: 1fr 1fr;
grid-gap: 15px;
padding: 15px 0;
}
#media (min-width: 600px) {
.content {
grid-template-columns: 1fr 1fr;
}
}
#media (min-width: 900px) {
main {
grid-template-columns: 400px 1fr;
}
}
#media (min-width: 1200px) {
.content {
grid-template-columns: 1fr 1fr 1fr;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/css/1.css">
<title>Layout & RWD</title>
</head>
<body>
<header class="header"></header>
<main class="main">
<section class="sidebar"></section>
<section class="content">
<article class="content__box"></article>
<article class="content__box"></article>
<article class="content__box"></article>
<article class="content__box"></article>
<article class="content__box"></article>
<article class="content__box"></article>
</section>
</main>
<footer class="footer"></footer>
</body>
</html>
Above 900px you have two columns in addition to the two rows you have due to grid-template-rows: 1fr 1fr. You can reset this to a single column by adding grid-template-rows: auto targeting above 900px - see demo below:
body {
margin: 0;
padding: 0;
min-height: 100vh;
box-sizing: border-box;
}
.header,
.footer {
height: 100px;
background-color: #1A1C22;
}
.sidebar {
background-color: #6C757D;
}
.content__box {
background-color: #343A40;
}
.content {
display: grid;
grid-gap: 15px;
}
.main {
min-height: 400px;
height: calc(100vh - 200px);
display: grid;
grid-template-rows: 1fr 1fr;
grid-gap: 15px;
padding: 15px 0;
}
#media (min-width: 600px) {
.content {
grid-template-columns: 1fr 1fr;
}
}
#media (min-width: 900px) {
.main { /* changed from 'main' to '.main' for specificity reasons */
grid-template-rows: auto; /* added */
grid-template-columns: 400px 1fr;
}
}
#media (min-width: 1200px) {
.content {
grid-template-columns: 1fr 1fr 1fr;
}
}
<header class="header"></header>
<main class="main">
<section class="sidebar"></section>
<section class="content">
<article class="content__box"></article>
<article class="content__box"></article>
<article class="content__box"></article>
<article class="content__box"></article>
<article class="content__box"></article>
<article class="content__box"></article>
</section>
</main>
<footer class="footer"></footer>
I am new in the CSS Grid and now I am playing with it now. I want to make 4x4 grid template.
In my code this grid displays incorrectly - the problem is with Table_4. Why it shows incorrectly? Can you guys please tell me what I did wrong?
body {
background-color: gray;
}
.grid {
display: grid;
width: 100%;
height: 250px;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas:
"item-a item-a item-a item-a"
"item-b . . ."
"item-b . . ."
"item-b . . .";
}
.item-a {
grid-area: item-a;
background-color: lightcoral;
text-align: center;
}
.item-b {
grid-area: item-b;
background-color: lightblue;
text-align: center;
}
.item-c {
grid-area: item-c;
background-color: lightcyan;
text-align: center;
}
.item-d {
grid-area: item-d;
background-color: lightgreen;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="../sources/css/style.css">
</head>
<body>
<div class="grid">
<div class="item-a">Table_1</div>
<div class="item-b">Table_2</div>
<div class="item-c">Table_3</div>
<div class="item-d">Table_4</div>
</div>
</body>
</html>
You need to list item-c in your grid-template-areas:
body {
background-color: gray;
}
.grid {
display: grid;
width: 100%;
height: 250px;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas: "item-a item-a item-a item-a" "item-b item-c item-c item-c" "item-b item-c item-c item-c" "item-d item-d item-d item-d";
}
.item-a {
grid-area: item-a;
background-color: lightcoral;
text-align: center;
}
.item-b {
grid-area: item-b;
background-color: lightblue;
text-align: center;
}
.item-c {
grid-area: item-c;
background-color: lightcyan;
text-align: center;
}
.item-d {
grid-area: item-d;
background-color: lightgreen;
text-align: center;
}
<div class="grid">
<div class="item-a">Table_1</div>
<div class="item-b">Table_2</div>
<div class="item-c">Table_3</div>
<div class="item-d">Table_4</div>
</div>
I'm working on a navbar for a website, like your average navbar, It has a logo (float: left), links to other pages, and account setting at the end (float: right), all side by side. When the window gets resized, I want to be able to still have all elements of the navbar present without having to scroll horizontally. I want to do this by placing all the links to the pages below the logo (and still have account setting at the top right).
At Full-screen the navbar work perfectly (simple enough). When the window is resized everything gets messed up (last div ends up out of window).
The two top images are illustrations of what im working towards, and the third one down is my current issue.
I have some experience in css, but understanding how to fix this (or look up how to fix this) is beyond my abilities. I would really appreciate some help :)
Attached code snippet, is a base that uses "CSS grid" and media queries. There are some duplicates in the CSS that could with more time spent, be improved, thus minimize the code. It gives you an idea about how these layouts are built.
#media only screen and (max-width: 600px) {
.wrapper {
display: grid;
grid-template-columns:
1fr
;
grid-template-rows:
100px
100px
100px
;
grid-template-areas:
"header-1"
"header-2"
"content"
;
}
.header-1 {
grid-area: header-1;
background-color: grey;
}
.header-2 {
grid-area: header-2;
background-color: grey;
}
.content {
grid-area: content;
background-color: lightgrey;
}
.header-1 {
display: grid;
grid-template-columns:
1fr
1fr
1fr
;
grid-template-rows:
100px
;
grid-template-areas:
"box-1 box-2 box-3"
;
}
.box-1 {
grid-area: box-1;
background-color: magenta;
margin: 10px;
}
.box-2 {
grid-area: box-2;
background-color: cyan;
margin: 10px;
}
.box-3 {
grid-area: box-3;
background-color: green;
margin: 10px;
}
}
#media only screen and (min-width: 600px) {
.wrapper {
display: grid;
grid-template-columns:
1fr
;
grid-template-rows:
100px
100px
100px
;
grid-template-areas:
"header-1"
"header-2"
"content"
;
}
.header-1 {
grid-area: header-1;
background-color: grey;
}
.header-2 {
grid-area: header-2;
background-color: grey;
}
.content {
grid-area: content;
background-color: lightgrey;
}
.header-1 {
display: grid;
grid-template-columns:
1fr
1fr
1fr
;
grid-template-rows:
100px
;
grid-template-areas:
"box-1 . box-3"
;
}
.header-2 {
display: grid;
grid-template-columns:
1fr
1fr
1fr
;
grid-template-rows:
100px
;
grid-template-areas:
"box-2 box-2 box-2"
;
}
.box-1 {
grid-area: box-1;
background-color: magenta;
margin: 10px;
}
.box-2 {
grid-area: box-2;
background-color: cyan;
}
.box-3 {
grid-area: box-3;
background-color: green;
margin: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="header-1">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</div>
<div class="header-2">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</div>
<div class="content"></div>
</div>
</body>
</html>