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;
Related
So I am trying to wrap my head around css grid. What confuses me is the 'fr' unit on the row as I inspect the grid on the browser, '1fr . 834px'. I set on the main container, 'grid-template-rows: 1fr 1fr 1fr 1fr'. The grid just overblown. When I tried to put the 'height: 250px' in the header container , the column did change, but the row still hold the value 834px. Thus, there will be a huge white gap to the second row. I want it to be when I put the 'height: 250px' on the main container, the next bottom item will follow and stick to become the next column. How do I fix this ? Please help.
P.S : it has to be done only in grid, no flexbox.
Update : Solution found. Have to put height: 100vh on the container and thats it.
Below is my code:
<!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>Holy Grail Mockup</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">Header Logo</div>
<div class="menu">
<ul>
<li>header link one</li>
<li>header link two</li>
<li>header link three</li>
<li>header link four</li>
</ul>
</div>
</div>
<div class="sidebar">
<div class="photo">
<p>placeholder for image</p>
</div>
<div class="side-content">Box 1
</div>
<div class="side-content">Box 2
</div>
<div class="side-content">Box 3
</div>
</div>
<div class="nav">
<ul>
<li>Latest Articles</li>
<li>Most Views</li>
<li>Featured</li>
</ul>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.container {
display: grid;
text-align: center;
grid-template-columns: 1fr 4fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 4px;
overflow: hidden;
}
.container div {
padding: 15px;
font-size: 32px;
font-family: Helvetica;
font-weight: bold;
color: white;
}
.header {
display: grid;
background-color: #393f4d;
grid-template-columns: 20% 80%;
grid-column: 1/3;
height: 200px;
}
.logo {
display: grid;
justify-content: flex-start;
}
.menu ul,
.menu li {
display: grid;
white-space: nowrap;
align-items: flex-start;
grid-template-columns: repeat(4, 1fr);
font-size: 16px;
list-style: none;
margin-top: 8px;
margin-inline: 115px;
}
.sidebar {
display: grid;
grid-template-rows: repeat(4, 1fr);
background-color: #FF7755;
grid-column: 1/2;
grid-row: 2/4;
gap: 50px;
text-align: center;
}
.sidebar .photo {
display: grid;
align-items: center;
justify-items: center;
background-color: white;
color: black;
font-size: 12px;
font-weight: normal;
border-radius: 10px;
}
.sidebar .side-content {
display: grid;
align-items: center;
justify-items: center;
background-color: white;
color: black;
font-size: 16px;
font-weight: normal;
}
.nav {
display: grid;
background-color: #FF7755;
grid-template-columns: 100%;
grid-column: 2/3;
grid-row: 2/3;
height: 2vh;
}
.nav ul,
.nav li {
display: grid;
grid-auto-flow: column;
font-size: 16px;
text-transform: uppercase;
list-style: none;
}
.article {
display: grid;
background-color: #bccbde;
grid-column: 2/3;
grid-row: 3/4;
}
.article p {
font-size: 18px;
font-family: sans-serif;
color: white;
text-align: left;
}
.article .card {
background-color: #FFFFFF;
color: black;
text-align: center;
}
.card p {
color: black;
font-weight: normal;
font-size: 14px;
}
.card .title {
font-size: 18px;
text-align: center;
}
.footer {
background-color: #393f4d;
}
.footer p {
font-size: 13px;
font-weight: normal;
}
I’m currently learning how to code a hamburger menu. I would like to have it aligned in the center in a designated column in a row, and I’m trying to do the same with the links in navigation. However, I can’t get the links to center properly. Below is the code that I have so far:
.grid-container {
display: grid;
grid-template-areas: "header menu";
grid-template-columns: repeat(8, 1fr);
}
.header {
grid-area: header;
grid-column: span 7;
margin: 2px;
background-color: black;
}
.nav-test {
display: flex;
direction: row;
justify-content: space-around;
list-style-type: none;
}
.nav-test a {
color: white;
}
.menu {
display: flex;
grid-area: menu;
grid-column: span 1;
margin: 2px;
background-color: black;
}
<div class="grid-container">
<div class="item header">
<ul class="nav-test">
<li>Home</li>
<li>About Me</li>
<li>Music</li>
<li>Tours</li>
<li>Contact</li>
</ul>
</div>
<div class="item menu"></div>
</div>
My goal is to do the same with the hamburger menu in the last column as well. What is it I’m forgetting to set in order to center the header properly?
Browsers by default add left padding to a ul element, which is pushing the contents of your nav-test list over.
The simplest solution would be to reset the padding:
.nav-test {
padding-left:0px; /* add this */
display: flex;
direction: row;
justify-content: space-around;
list-style-type: none;
}
If you go and inspect the nav-test container you'll see that there's an extra 40px padding on the left of the container. This is the reason that your links aren't centered. To fix this just add padding-left: 0; in your nav-test class. Try running the snippet and see if this fixes things for you.
.grid-container {
display: grid;
grid-template-areas: "header menu";
grid-template-columns: repeat(8, 1fr);
}
.header {
grid-area: header;
grid-column: span 7;
margin: 2px;
background-color: black;
}
.nav-test {
display: flex;
direction: row;
justify-content: space-around;
list-style-type: none;
padding-left: 0;
}
.nav-test a {
color: white;
}
.menu {
display: flex;
grid-area: menu;
grid-column: span 1;
margin: 2px;
background-color: black;
}
<!doctype html>
<html>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="menu_design.css">
<head>
<div class="grid-container">
<div class="item header">
<ul class="nav-test">
<li>Home</li>
<li>About Me</li>
<li>Music</li>
<li>Tours</li>
<li>Contact</li>
</ul>
</div>
<div class="item menu"></div>
</div>
</head>
</html>
As you can see your Nav has some li tags which is inside parent tag ul so what you can do is in your parent element set display: flex; and justify-content: space-around; or justify-content: space-between; to center each element in your nav-bar
.grid-container {
display: grid;
grid-template-areas: "header menu";
grid-template-columns: repeat(8, 1fr);
}
.header {
grid-area: header;
grid-column: span 7;
margin: 2px;
background-color: black;
}
.nav-test {
display: flex;
direction: row;
justify-content: space-around;
list-style-type: none;
padding-left: 0;
}
.nav-test a {
color: white;
}
.menu {
display: flex;
grid-area: menu;
grid-column: span 1;
margin: 2px;
background-color: black;
}
<!doctype html>
<html>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="menu_design.css">
<head>
<div class="grid-container">
<div class="item header">
<ul class="nav-test">
<li>Home</li>
<li>About Me</li>
<li>Music</li>
<li>Tours</li>
<li>Contact</li>
</ul>
</div>
<div class="item menu"></div>
</div>
</head>
</html>
CSS noob here, running into an issue that I can't seem to figure out, my CSS in creating blank space at the bottom of the document, I'd say about 60% of it. Is there something wrong with the parent parameters or the children?
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Redacted</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="grid-container">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
<li><a id="asides" href="asides.asp">Asides</a></li>
</ul>
<p class="intro">
Bacon Ipsum
</p>
<p class="projects">
Lorem Ipsum
</p>
<footer>Footer placeholder</footer>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
* {
border: 1px solid gold;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 10px 10px;
grid-auto-flow: row;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #ffffff;
}
.intro {
grid-column: 1 / span 4;
grid-row: 2;
}
.projects {
grid-column: 1 / span 4;
grid-row: 3;
}
footer {
grid-column: 1 / span 4;
grid-row: 4;
}
body {
background-color: rgb(124, 252, 188);
margin: 0;
padding: 0;
}
Please excuse the terrible formatting, for now, apologies, and thank you in advance!
You forget to add height on body and grid-container
html,
body {
height: 100%;
}
and add height on the grid-container
.grid-container {
height: 100%;
...
}
CODEPEN
* {
border: 1px solid gold;
}
html,
body {
height: 100%;
}
body {
background-color: rgb(124, 252, 188);
margin: 0;
padding: 0;
}
.grid-container {
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 10px 10px;
grid-auto-flow: row;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #ffffff;
}
.intro {
grid-column: 1 / span 4;
grid-row: 2;
}
.projects {
grid-column: 1 / span 4;
grid-row: 3;
}
footer {
grid-column: 1 / span 4;
grid-row: 4;
}
<div class="grid-container">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
<li><a id="asides" href="asides.asp">Asides</a></li>
</ul>
<p class="intro">
Bacon Ipsum
</p>
<p class="projects">
Lorem Ipsum
</p>
<footer>Footer placeholder</footer>
</div>
Trying my best to learn CSS Grid...
I have made a nav menu but cannot get it to collapse for mobile view ('hamburger' menu style). I have tried using the 'checkbox hack' seen in several videos and online tutorials.
I also can't seem to get all of the links to list (list begins at 'Products' in my mobile view, but should begin at 'About Us').
Been working on this for days with no luck.
If anyone could help me out in getting this to work I would be very grateful.
Here's the HTML & CSS:
html, body{
margin: 0;
padding: 0;
font-family: Roboto, sans-serif;
font-size: 100%;
}
header{
/* grid-column-start: 1;
grid-column-end: 3;
grid-row:1;
*/
grid-area: header;
background-image:linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(../img/rockspiral.jpg);
display: grid;
grid-template-columns: repeat (4, 1fr);
/* 100px, 1fr 1fr 1fr;
*/
/**** Change to 10% and 90% otherwise it takes up the full viewport ****/
grid-template-rows: 100px auto;
grid-template-areas: "logo topbar-nav topbar-nav topbar-nav" ". hero-text hero-text . ";
}
.logo{
grid-area: logo;
background-image:url(../img/logo-mobile.png);
background-repeat: no-repeat;
margin-left: 10px;
}
.topbar-nav{
grid-area: topbar-nav;
color:white;
background-color: lightblue;
justify-self: end;
align-self: center;
}
.topbar-nav, ul, li{
list-style-type: none;
float: left;
padding: 0px 5px 0px 5px;
}
.hero-text{
grid-area: hero-text;
color:white;
justify-self: center;
align-self: center;
}
.hero-text h1{
font-size: 600%;
}
.hero-text p{
font-size: 200%;
text-align: center;
}
nav{
grid-area: nav;
}
.grid-about{
/* grid-column-start: 1;
grid-column-end: 4;
grid-row:2;
*/
grid-area: about;
}
.grid-products{
/* grid-column-start: 1;
grid-column-end: 4;
grid-row:3;
*/
grid-area: products;
}
.grid-services{
/* grid-column-start: 1;
grid-column-end: 4;
grid-row:4;
*/
grid-area: services;
}
.grid-contact{
grid-area: contact;
}
.grid-location{
grid-area: location;
}
.grid-phone-social{
grid-area: phone;
}
footer{
/* grid-column-start: 1;
grid-column-end: 4;
grid-row:6;
*/
grid-area: footer;
}
/****Grid for mobile screens****/
#media (max-width: 767px){
.grid-container{
display: grid;
background-color: aqua;
grid-auto-rows: 50vh;
grid-gap: 10px;
grid-template-areas: "header"
/* "nav"*/
"about" "products" "services" "contact" "location" "phone" "footer";
}
header{
background-image:linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(../img/rockspiral-mobile.jpg);
background-repeat: no-repeat;
/* Change to: grid-template-columns: 110px auto;
*/
grid-template-columns: 110px auto;
grid-template-rows: 50px auto;
grid-template-areas: "logo topbar-nav" "hero-text hero-text";
}
.topbar-nav ul, li{
display: grid;
grid-template-rows: 10px;
grid-gap: 5px;
font-size:75%;
float:left;
}
.hero-text h1{
font-size: 300%;
text-align: center;
}
.hero-text p{
font-size: 150%;
text-align: center;
}
}
/****Grid for tablet screens****/
#media (min-width: 768px){
.grid-container{
display: grid;
grid-auto-rows: 100vh;
grid-gap: 10px;
background-color: red;
grid-template-areas: "header"
/* "nav" */
"about" "products" "services" "contact" "location" "phone" "footer";
}
header{
grid-area: header;
background-image:linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(../img/rockspiral.jpg);
display: grid;
/* changed: column size 260px 1fr 1fr 1fr*/
grid-template-columns: 260px 1fr 1fr 1fr;
grid-template-rows: 100px auto;
grid-template-areas: "logo topbar-nav topbar-nav topbar-nav" "hero-text hero-text hero-text hero-text";
}
.logo{
grid-area: logo;
background-image:url(../img/logo.png);
background-repeat: no-repeat;
margin-left: 10px;
}
}
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/layout.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<title>CSS Grid Sandbox</title>
</head>
<body>
<div class="grid-container">
<header>
<div class="logo"></div>
<div class="topbar-nav">
<ul>
<li>About</li>
<li>Products</li>
<li>Services</li>
<li>Contact</li>
<li>Location & Hours</li>
<li>Phone & Social Media</li>
</ul>
</div>
<div class="hero-text">
<h1>Big Rock Sale</h1>
<p>All rocks 50% off. Offer ends soon!</p>
</div>
</header>
<!-- <nav>Nav</nav> -->
<section class="grid-about">About Us</section>
<section class="grid-products">Products</section>
<section class="grid-services">Services</section>
<section class="grid-contact">Contact</section>
<section class="grid-location">Location & Hours</section>
<section class="grid-phone-social">Phone & Social Media</section>
<footer>Footer</footer>
</div>
</body>
</html>
While I personally recommend using Javascript for this a pure CSS version can be achieved through multiple methods, one of which is by using a checkbox paired with the :checked selector.
.hamburger-menu-content {
display: none;
}
#hamburger-menu-trigger:checked+.hamburger-menu-content {
/* '+' means all elements that have the first element preceding it */
display: block;
}
<input type="checkbox" id="hamburger-menu-trigger">
<div class="hamburger-menu-content">
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
</div>
The downside of this approach is that you need to click the input again to close it.
To mitigate this we could use a pair of radio button.
.hamburger-menu-content {
display: none;
}
#hamburger-menu-trigger:checked {
display: none;
}
#hamburger-menu-trigger:checked+.hamburger-menu-content {
/* '+' means all elements that have the first element preceding it */
display: block;
}
<input type="radio" name="menuToggle" id="hamburger-menu-trigger">
<div class="hamburger-menu-content">
<input type="radio" name="menuToggle">
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
</div>
edit: In case you want to change the looks of the buttons you can reference this guide https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
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>