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>
Related
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>
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 want 4 paragraph at corner and 1 at center of div how can I do that?
I hope I understood u right.
I provided u a plunker example:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
'first . second'
'. third . '
'fourth . fifth';
width: 500px;
height: 500px;
border: 1px solid red;
}
.container > p {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
}
.first {
grid-area: first;
}
.second {
grid-area: second;
}
.third {
grid-area: third;
}
.fourth {
grid-area: fourth;
}
.fifth {
grid-area: fifth;
}
</style>
</head>
<body>
<div class="container">
<p class="first">1</p>
<p class="second">2</p>
<p class="third">3</p>
<p class="fourth">4</p>
<p class="fifth">5</p>
</div>
</body>
</html>
https://plnkr.co/edit/IoR8muSmBLtFZIXLOvPe?p=preview
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>