I've started to learn html and css, and I have big issues with layout, I tried grid and flexbox. What I want to achieve is this:
What layout I try to have
And sadly, my website looks like this:
My lay out look like this
Now here's my code, and please explain like you would explain to a braindead if you're willing to, thanks in advance and have a nice day.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name"viewport" content="width=device-width", initial-scale="1.0"/>
<title>PE-ZONA.RO | WEBTOONS </title>
<link rel="stylesheet" href="../css/styles.css"/>
<link rel="stylesheet" href="../css/normalize.css"/>
</head>
<body>
<!-- HEADER - ICONIȚE -->
<header>
<div class="mhcon">
<div class="mhconitem">PATREON</div>
<div class="mhconitem2">DISCORD</div>
</div>
</header>
<!-- SIDEBAR-NAVIGATIE -->
<aside>
<nav>
<div id="sidebar">
<ul>
<li>WEBTOONS</li>
<li>ECHIPĂ</li>
<li>ALĂTURĂ-TE</li>
<li>BLOG</li>
</ul>
</div>
</nav>
<aside>
<!-- WEBTOONS -->
<section>
<div class="content">
<div class="card">
<h3>NUME WEBTOON1</h3> <br>
<p>DESCRIERE WEBTOON
</div>
<div class="card">
<h3>NUME WEBTOON2</h3> <br>
<p>DESCRIERE WEBTOON
</div>
<div class="card">
<h3>NUME WEBTOON3</h3> <br>
<p>DESCRIERE WEBTOON
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footercon">
<p>Copyright # pe-zona.ro</p>
</div>
</footer>
</body>
</html>
/* ARTICOLE */
.card {
background-color: #c4c4;
margin: 20px;
padding: 20px;
border: 6px solid #c5c5;
}
/* CONTAINER MENIU HEADER */
.mhcon {
display: flex;
flex-flow: row;
justify-content: flex-end;
border: 1px solid red;
order: 1;
flex: 1;
}
/* PATREON BUTTON */
.mhconitem {
margin: 25px 15px;
padding: 20px;
width: 200px;
text-align: center;
background-color: #f07167;
border-radius: 4px;
border: none;
}
.mhconitem a {
color: white;
font-size: 2.5rem;
font-weight: 700;
text-decoration: none;
}
/* DISCORD BUTTON */
.mhconitem2 {
margin: 25px 15px;
padding: 20px;
width: 200px;
text-align: center;
background-color: #6a4c93;
border-radius: 4px;
border: none;
}
.mhconitem2 a {
color: white;
font-size: 2.5rem;
font-weight: 700;
text-decoration: none;
}
/* CONTAINER SIDEBAR */
#sidebar {
background-color: black;
height: 100vh;
width: 25vh;
display: flex;
flex: 1;
}
/* CONTAINER CONTENT */
.content {
display: flex;
justify-content: flex-end;
flex: 2;
}
/* CONTAINER FOOTER */
.footercon {
display: flex;
justify-content: flex-end;
}
.footercon p {
justify-content: center;
}
Using CSS-Grids, Your layout is ready :)
CSS-Grids offer lots of flexibility to create such layouts rather than
by using flex-boxes.
CODEPEN LINK: https://codepen.io/emmeiWhite/pen/abmEBgP
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
body {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(8, 1fr);
height: 90vh;
width: 90vw;
margin: 1rem auto;
gap: 1rem;
grid-template-areas:
"aside section section section"
"aside section section section"
"aside section section section"
"aside section section section"
"aside section section section"
"aside section section section"
"aside footer footer footer"
"aside footer footer footer";
}
aside,
header,
footer,
section {
border: 1px solid #ccc;
}
aside {
grid-area: aside;
}
section {
grid-area: section;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(6, 1fr);
padding: 2rem;
grid-template-areas:
" header header header"
"content content content"
"content content content"
"content content content"
"content content content"
"content content content";
}
header {
grid-area: header;
border: none;
}
header .mhcon {
display: flex;
justify-content: flex-end;
}
header .mhcon div {
border: 1px solid #ccc;
padding: 0.5rem 1rem;
}
header .mhcon div:last-child {
margin-left: 1rem;
}
.content {
display: grid;
grid-area: content;
grid-template-columns: repeat(3, 1fr);
column-gap: 2rem;
row-gap: 1rem;
}
.card {
border: 1px solid #ccc;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
footer {
grid-area: footer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name"viewport" content="width=device-width", initial-scale="1.0"/>
<title>PE-ZONA.RO | WEBTOONS</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<!-- SIDEBAR-NAVIGATIE -->
<aside>
<nav>
<div id="sidebar">
<ul>
<li>WEBTOONS</li>
<li>ECHIPĂ</li>
<li>ALĂTURĂ-TE</li>
<li>BLOG</li>
</ul>
</div>
</nav>
</aside>
<!-- WEBTOONS -->
<section>
<!-- HEADER - ICONIȚE -->
<header>
<div class="mhcon">
<div class="mhconitem">PATREON</div>
<div class="mhconitem2">DISCORD</div>
</div>
</header>
<div class="content">
<div class="card">
<h3>NUME WEBTOON1</h3>
<br />
<p>DESCRIERE WEBTOON</p>
</div>
<div class="card">
<h3>NUME WEBTOON2</h3>
<br />
<p>DESCRIERE WEBTOON</p>
</div>
<div class="card">
<h3>NUME WEBTOON3</h3>
<br />
<p>DESCRIERE WEBTOON</p>
</div>
<div class="card">
<h3>NUME WEBTOON1</h3>
<br />
<p>DESCRIERE WEBTOON</p>
</div>
<div class="card">
<h3>NUME WEBTOON2</h3>
<br />
<p>DESCRIERE WEBTOON</p>
</div>
<div class="card">
<h3>NUME WEBTOON3</h3>
<br />
<p>DESCRIERE WEBTOON</p>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footercon">
<p>Copyright # pe-zona.ro</p>
</div>
</footer>
</body>
</html>
Related
i have been trying to fix this code for school.
i've tried to tweak many things here and there but still haven't been able to figure out why my images stay to the left of the screen instead of actually making a grid, since i have used auto-fit.
i have left in some css stuff from my other html pages, but the problem could be that they're interacting with eachother so i left them in there.
body {
font-family: "Inter", sans-serif;
background-color: #000000;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 10px;
}
/* layout container */
.containerIndex {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 0.25fr 1.5fr 1.2fr 0.8fr;
grid-template-areas:
"nav nav nav nav"
"sidebar movies movies movies"
"sidebar movies movies movies"
"sidebar movies movies movies"
"sidebar footer footer footer";
grid-gap: 0.2rem;
font-weight: 800;
text-transform: uppercase;
font-size: 12px;
color: #FFFFFF;
text-align: center;
}
.containerMain {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 0.25fr 1.5fr 1.5fr 0.8fr;
grid-template-areas:
"nav nav nav nav"
"main main main main"
"main main main main"
"main main main main"
"footer footer footer footer";
grid-gap: 0.2rem;
font-weight: 800;
text-transform: uppercase;
font-size: 12px;
color: #FFFFFF;
text-align: center;
}
<strike>Markdown this is the movie grid.</strike>
/* film overzicht images */
.movies {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 10px;
}
article {
display: grid;
width: 300px;
}
article img {
grid-column: 1;
grid-row: 1;
width: 300px;
height: 300px;
display: block;
}
.overlay-text {
align-self: end;
grid-column: 1;
grid-row: 1;
color: #fff;
background-color: rgba(0, 0, 0, 0.7);
padding: 10px;
font-size: 2rem;
line-height: 1.7;
}
.overlay-text p {
margin: 0;
}
article img {
width: 300px;
height: 300px;
display: block;
}
.overlay-text {
align-self: end;
grid-column: 1;
grid-row: 1;
color: #fff;
background-color: rgba(0, 0, 0, 0.7);
padding: 10px;
font-size: 2rem;
line-height: 1.7;
}
.overlay-text p {
margin: 0;
}
.airwolf_afbeelding {
width: 300px;
height: 300px;
position: absolute;
margin-left: 0px;
}
.airwolf_video {
position: absolute;
right: 50px;
top: 200px;
}
/* netflix naam en logo */
.logo {
display: block;
position: absolute;
margin-left: -20px;
margin-top: -24px;
width: 88px;
}
nav {
font-family: fantasy;
font-size: large;
background: #8a0c03;
grid-area: nav;
border-radius: 20px;
padding-top: 5px;
}
/* Menu */
.dropdown {
position: absolute;
display: block;
margin-left: 1400px;
margin-top: -50px;
}
.dropbtn {
background-color: #8a0c03;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #8a0c03;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
margin-left: -57px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
display: block;
}
.dropdown-content a:hover {
background-color: #8a0c03;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #8a0c03;
}
/* tabel */
table,
th,
td {
BORDER: 1;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
border: 1px solid white;
border-collapse: collapse;
}
th,
td {
background-color: #8a0c03;
color: rgba(0, 0, 0, 0.7)
}
/* algemene opmaak */
main {
background: #000000;
color: #8a0c03;
grid-area: main;
border-radius: 5px;
padding-top: 5px;
}
.movies {
background: #000000;
color: #8a0c03;
grid-area: movies;
border-radius: 5px;
padding-top: 5px;
}
#sidebar {
background: #8a0c03;
height: 100%;
color: #000000;
grid-area: sidebar;
border-radius: 5px;
padding-top: 5px;
}
footer {
background: #8a0c03;
grid-area: footer;
border-radius: 5px;
padding-top: 5px;
}
a {
text-align: center;
display: block;
font-family: inherit;
text-decoration: none;
font-weight: bold;
margin: 1rem;
}
/* resize voor kleinere devices */
#media only screen and (max-width: 550px) {
.containerIndex {
grid-template-columns: 1fr;
grid-template-rows: 0.25fr 0.4fr 1fr 1fr;
grid-template-areas:
"nav"
"sidebar"
"dropdown"
"main"
"footer";
}
.containerMain {
grid-template-columns: 1fr;
grid-template-rows: 0.25fr 0.4fr 1fr 1fr;
grid-template-areas:
"nav"
"dropdown"
"main"
"footer";
}
.dropdown {
position: absolute;
display: block;
margin-left: 366.5px;
margin-top: -50px;
}
}
<div class="containerIndex">
<nav>
<a class="button" href="Index.html"><img src="/images/LogoF.jpg" class="logo" alt="LogoF">
</a>
<h1>F l e t n i x</h1>
<div class="dropdown">
<button class="dropbtn">Menu</button>
<div class="dropdown-content">
Inloggen
Registreren
Over ons
Privacy verklaring
</div>
</div>
</nav>
<movies>
<article>
<img src="/movies/Airwolf.jpg" alt="Airwolf">
<div class="overlay-text">
<p>Airwolf</p>
</div>
</article>
<article>
<img src="/movies/Annie.jpg" alt="Annie">
<div class="overlay-text">
<p>Annie</p>
</div>
</article>
<article>
<img src="/movies/Baywatch.jpg" alt="Baywatch">
<div class="overlay-text">
<p>Baywatch</p>
</div>
</article>
<article>
<img src="/movies/Clueless.jpg" alt="Clueless">
<div class="overlay-text">
<p>Clueless</p>
</div>
</article>
<article>
<img src="/movies/Deadpool.jpg" alt="Deadpool">
<div class="overlay-text">
<p>Deadpool</p>
</div>
</article>
<article>
<img src="/movies/Election.jpg" alt="Election">
<div class="overlay-text">
<p>Election</p>
</div>
</article>
<article>
<img src="/movies/Fences.jpg" alt="Fences">
<div class="overlay-text">
<p>Fences</p>
</div>
</article>
<article>
<img src="/movies/Friends.jpg" alt="Friends">
<div class="overlay-text">
<p>Friends</p>
</div>
</article>
<article>
<img src="/movies/Fringe.jpg" alt="Fringe">
<div class="overlay-text">
<p>Fringe</p>
</div>
</article>
<article>
<img src="/movies/Frozen.jpg" alt="Frozen">
<div class="overlay-text">
<p>Frozen</p>
</div>
</article>
<article>
<img src="/movies/Gravity.jpg" alt="Gravity">
<div class="overlay-text">
<p>Gravity</p>
</div>
</article>
<article>
<img src="/movies/Her.jpg" alt="Her">
<div class="overlay-text">
<p>Her</p>
</div>
</article>
<article>
<img src="/movies/Madagascar.jpg" alt="Madagascar">
<div class="overlay-text">
<p>Madagascar</p>
</div>
</article>
<article>
<img src="/movies/Maleficent.jpg" alt="Maleficent">
<div class="overlay-text">
<p>Maleficent</p>
</div>
</article>
<article>
<img src="/movies/Moneyball.jpg" alt="Moneyball">
<div class="overlay-text">
<p>Moneyball</p>
</div>
</article>
<article>
<img src="/movies/Ratatouille.jpg" alt="Ratatouille">
<div class="overlay-text">
<p>Ratatouille</p>
</div>
</article>
<article>
<img src="/movies/Rio.jpg" alt="Rio">
<div class="overlay-text">
<p>Rio</p>
</div>
</article>
<article>
<img src="/movies/Roseanne.jpg" alt="Roseanne">
<div class="overlay-text">
<p>Roseanne</p>
</div>
</article>
<article>
<img src="/movies/Salt.jpg" alt="Salt">
<div class="overlay-text">
<p>Salt</p>
</div>
</article>
<article>
<img src="/movies/Serpico.jpg" alt="Serpico">
<div class="overlay-text">
<p>Serpico</p>
</div>
</article>
<article>
<img src="/movies/Shrek.jpg" alt="Shrek">
<div class="overlay-text">
<p>Shrek</p>
</div>
</article>
<article>
<img src="/movies/Titanic.jpg" alt="Titanic">
<div class="overlay-text">
<p>Titanic</p>
</div>
</article>
<article>
<img src="/movies/Twilight.jpg" alt="Twilight">
<div class="overlay-text">
<p>Twilight</p>
</div>
</article>
<article>
<img src="/movies/Vaiana.jpg" alt="Vaiana">
<div class="overlay-text">
<p>Vaiana</p>
</div>
</article>
<article>
<img src="/movies/Wanted.jpg" alt="Wanted">
<div class="overlay-text">
<p>Wanted</p>
</div>
</article>
<article>
<img src="/movies/Wild.jpg" alt="Wild">
<div class="overlay-text">
<p>Wild</p>
</div>
</article>
</movies>
<div id="sidebar">
<label for="zoeken">zoeken:
<br>
<input type="text" id="zoeken" name="zoeken" ><br>
</label>
<br>
<br> Genre's:
<br>
<br> Actie
<br>
<br> Comedy
<br>
<br> Animatie
<br>
<br> drama
<br>
<br> avontuur
<br>
<br> romantisch
<br>
<br> thriller
</div>
<footer>
© FletNix - 2021
</footer>
</div>
You have display:grid on your articles
Put display:grid on movies also make sure to change <movies> to <div class="movies"> for your css in .movies to actually work
You also need to state how many columns you want on a row by doing grid-template-columns in your .movies css file. Read more here
For example grid-template-columns:1fr 1fr 1fr will get you 3 columns
I've finished to divide each part of layouts with grid. But the contents (including the elements and the nesting elements inside) cannot be shown at the correct position (between nav and footer) when I debugged the HTML and CSS code which will be shown below:
article {
display: grid;
grid-template-rows: 20vh 10vh auto 10vh;
grid-template-columns: 10vw 20vw 20vw 20vw 20vw 10vw;
grid-template-areas: ". header header header header ."
". nav nav nav nav ."
". section section section section ."
". footer footer footer footer ."
}
header {
grid-area: header;
background-color: whitesmoke;
position: fixed;
}
nav {
grid-area: nav;
background-color:lightskyblue;
display: flex;
justify-content: center;
flex-direction: row;
margin: auto;
left: 0ex;
right: 0ex;
background-color: lightskyblue;
align-items: center;
position: relative;
font-family: Kanit;
}
section {
grid-area: content;
background-color: whitesmoke;
}
footer { grid-area: footer; background-color: lightskyblue; }
div.pi{
width: 60vh;
height: 40vh;
margin: 0;
font-family: Ubuntu;
}
h1{
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Introduce Myself</title>
<link rel="stylesheet" type="text/css" href="indexDemo.css">
</head>
<body>
<article>
<header> </header>
<nav>
<a class="guilding" href="#P2">Personal Information & Career Goal</a>
<a class="guilding" href="#P3">Education</a>
<a class="guilding" href="#P4">Work Experience & Placements</a>
<a class="guilding" href="#P5">Skills</a>
<a class="guilding" href="#P6">Hobbies & Interests & Achievements</a>
</nav>
<section>
<div class="pi">
<h1 id="#P2">Personal Information</h1>
<p>concrete contents
</p>
</div>
<div class="photo">
</div>
<div class="pic">
</div>
<div class="cg">
</div>
<div id="#P5">
</div>
</section>
<footer> </footer>
</article>
</body>
</html>
I don't know why It happened and ask for any help.
You just need to change
section {
grid-area: content; <---- content is not one of your grid-areas
background-color: whitesmoke;
}
to
section {
grid-area: section;
background-color: whitesmoke;
}
Your header still needs to be fixed to the top but I'll leave you to that.
article {
display: grid;
grid-template-rows: 20vh 10vh auto 10vh;
grid-template-columns: 10vw 20vw 20vw 20vw 20vw 10vw;
grid-template-areas: ". header header header header ." ". nav nav nav nav ." ". section section section section ." ". footer footer footer footer ."
}
header {
grid-area: header;
background-color: whitesmoke;
position: fixed;
}
nav {
grid-area: nav;
background-color: lightskyblue;
display: flex;
justify-content: center;
flex-direction: row;
margin: auto;
left: 0ex;
right: 0ex;
background-color: lightskyblue;
align-items: center;
position: relative;
font-family: Kanit;
}
section {
grid-area: section;
background-color: whitesmoke;
}
footer {
grid-area: footer;
background-color: lightskyblue;
}
div.pi {
width: 60vh;
height: 40vh;
margin: 0;
font-family: Ubuntu;
}
h1 {
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Introduce Myself</title>
<link rel="stylesheet" type="text/css" href="indexDemo.css">
</head>
<body>
<article>
<header>test</header>
<nav>
<a class="guilding" href="#P2">Personal Information & Career Goal</a>
<a class="guilding" href="#P3">Education</a>
<a class="guilding" href="#P4">Work Experience & Placements</a>
<a class="guilding" href="#P5">Skills</a>
<a class="guilding" href="#P6">Hobbies & Interests & Achievements</a>
</nav>
<section>
<div class="pi">
<h1 id="#P2">Personal Information</h1>
<p>concrete contents
</p>
</div>
<div class="photo">
<h1 id="#P2">Personal Information</h1>
<p>concrete contents
</p>
</div>
<div class="pic">
<h1 id="#P2">Personal Information</h1>
<p>concrete contents
</p>
</div>
<div class="cg">
<h1 id="#P2">Personal Information</h1>
<p>concrete contents
</p>
</div>
<div id="#P5">
<h1 id="#P2">Personal Information</h1>
<p>concrete contents
</p>
</div>
</section>
<footer> </footer>
</article>
</body>
</html>
I am trying to figure out how to position elements using css grid. I'm using firefox and I can see that my areas are defined properly, but when I try to move some sample stuff around they aren't moving.
I've read and tried a bunch of different things but I guess I'm implementing the solutions wrong?
I'm trying to have stuff side-by-side. Like content in section1 goes to sect1 and content in sect2 goes to section2 respectively on the page.
This is the html I want to move using css grids:
<div class="wrapper">
<header class="header">
<!--<img class="logo" src="imgs/logo.png" alt="logo"> -->
<h1>LOGO</h1>
<nav>
<ul class="nav_links">
<li>Home</li>
<li>Tutorials</li>
<li>About Us</li>
<li><button class="nav_buttons">Login</button></li>
</ul>
</nav>
</header>
<main>
<h2>TEXT HERE</h2>
<div id="sect1">
<P>MOVE ME/KEEP ME ON THE LEFT SIDE OF SCREEN</P>
</div>
<div id="sect2">
<p>MOVE ME/KEEP ME ON THE RIGHT SIDE OF SCREEN</p>
</div>
</main>
<footer class="foot">
</footer>
</div>
This is my css file:
body {
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
background-color: #ededed;
margin: 0;
padding: 0;
}
.wrapper {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr;
grid-template-rows: 80px 5fr 1fr;
grid-template-areas:
"header header"
"sect1 sect2"
"foot foot";
}
.wrapper .header {
grid-area: header;
}
.wrapper main {
grid-column: 1 / 3;
}
.wrapper main #sect1 {
grid-area: sect1;
background-color: lightcyan;
}
.wrapper main #sect2 {
grid-area: sect2;
background-color: lightpink;
}
.foot {
grid-area: foot;
background-color: rgb(255, 0, 0);
}
I think that you can specify the grid for descendants by using the subgrid. in this way:
body {
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
background-color: #ededed;
margin: 0;
padding: 0;
}
.wrapper {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr;
grid-template-rows: 80px 5fr 1fr;
grid-template-areas:
"header header"
"sect sect"
"foot foot";
}
.wrapper .header {
grid-area: header;
}
.wrapper main {
grid-area: sect;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: auto 1fr;
}
.wrapper main h2 {
grid-column: 1/-1;
}
.wrapper main #sect1 {
background-color: lightcyan;
}
.wrapper main #sect2 {
background-color: lightpink;
}
.foot {
grid-area: foot;
background-color: rgb(255, 0, 0);
}
<div class="wrapper">
<header class="header">
<!--<img class="logo" src="imgs/logo.png" alt="logo"> -->
<h1>LOGO</h1>
<nav>
<ul class="nav_links">
<li>Home</li>
<li>Tutorials</li>
<li>About Us</li>
<li><button class="nav_buttons">Login</button></li>
</ul>
</nav>
</header>
<main>
<h2>TEXT HERE</h2>
<div id="sect1">
<P>Section 1</P>
</div>
<div id="sect2">
<p>Section 2</p>
</div>
</main>
<footer class="foot">
</footer>
</div>
I would solve this by using a separate grid inside the main tag, like this:
body {
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
background-color: #ededed;
margin: 0;
padding: 0;
}
.wrapper {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr;
grid-template-rows: 80px 5fr 1fr;
grid-template-areas:
"header header"
"main main"
"foot foot";
}
.wrapper .header {
grid-area: header;
}
.wrapper main {
grid-area: main;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 150px 1fr;
grid-template-areas:
"text text"
"sect1 sect2"
}
.wrapper #sect1 {
grid-area: sect1;
background-color: lightcyan;
}
.wrapper #sect2 {
grid-area: sect2;
background-color: lightpink;
}
.foot {
grid-area: foot;
background-color: rgb(255, 0, 0);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrapper">
<header class="header">
<!--<img class="logo" src="imgs/logo.png" alt="logo"> -->
<h1>LOGO</h1>
<nav>
<ul class="nav_links">
<li>Home</li>
<li>Tutorials</li>
<li>About Us</li>
<li><button class="nav_buttons">Login</button></li>
</ul>
</nav>
</header>
<main>
<h2>TEXT HERE</h2>
<div id="sect1">
<p>Section 1</p>
</div>
<div id="sect2">
<p>Section 2</p>
</div>
</main>
<footer class="foot">
</footer>
</div>
</body>
</html>
This also gives you more control over the individual elements inside the main tag and lets you add more elements without having to work with the navbar and footer structure in the wrapper.
I'm trying to learn how to use grid layout. I need to make my grid take the entire page, but for some reason, there is an extra space between the navigation bar (1st row) and the 2nd row. how do I get rid of the space so that the only space remaining between 1st and 2nd row is the grid-gap I specified.
screenshot
* {
margin: 0px;
padding: 0px;
}
#grid-layout {
display: grid;
grid-gap: 6px;
grid-column: 1fr 1fr 1fr 1fr;
grid-row: 60px auto auto auto 30px;
width: 100vw;
height: 100vh;
grid-template-areas: "nav nav nav nav" "top-post top-post post-2 post-3" "top-post top-post post-4 post-5" "newsletter newsletter newsletter newsletter" "ft ft ft ft";
}
.nav-bar {
grid-area: nav;
display: flex;
flex-direction: row;
border: 1px solid red;
align-items: center;
height: 100px;
padding: 10px;
}
.website-title {
width: 40%;
justify-content: flex-start;
}
.nav-bar-list {
display: flex;
flex-direction: row;
width: 60%;
justify-content: flex-start;
margin: 0px;
}
.nav-bar-item {
margin-right: 50px;
}
.main-post {
grid-area: top-post;
border: 1px solid red;
width: 100%;
height: 100%;
}
#post2 {
grid-area: post-2;
border: 1px solid red;
}
#post3 {
grid-area: post-3;
border: 1px solid red;
}
#post4 {
grid-area: post-4;
border: 1px solid red;
}
#post5 {
grid-area: post-5;
border: 1px solid red;
}
.newsletter {
grid-area: newsletter;
border: 1px solid red;
}
#footer {
grid-area: ft;
border: 1px solid red;
text-align: center;
align-items: center;
padding: 5px;
margin: 0px;
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="index.css">
<meta charset="utf-8">
</head>
<body>
<div id="grid-layout">
<nav class="nav-bar">
<div class="website-title">Title</div>
<ul class="nav-bar-list">
<li class="nav-bar-item">Home</li>
<li class="nav-bar-item">Blog</li>
<li class="nav-bar-item">About</li>
</ul>
</nav>
<section class="main-post">
<div class="text-gradient">
<a href="#">
<h4>Main Post Here</h4>
</a>
<p>Main Post Summary here</p>
Read More
</div>
</section>
<section class="post" id="post2">
<a href="#" class="link">
<div class="text-gradient">
<h4>Post 2 Here</h4>
<p>Post 2 subtitle</p>
</div>
</a>
</section>
<section class="post" id="post3">
<a href="#" class="link">
<div class="text-gradient">
<h4>Post 3 Here</h4>
<p>Post 3 subtitle</p>
</div>
</a>
</section>
<section class="post" id="post4">
<a href="#" class="link">
<div class="text-gradient">
<h4>Post 4 Here</h4>
<p>Post 4 subtitle</p>
</div>
</a>
</section>
<section class="post" id="post5">
<a href="#" class="link">
<div class="text-gradient">
<h4>Post 5 Here</h4>
<p>Post 5 subtitle</p>
</div>
</a>
</section>
<section class="newsletter">
<form action="#">
<h5>Subscribe to our Newsletter</h5>
<div class="newsletter-container">
<div class="newsletter-element">
<input type="text" placeholder="Name" name="name" required>
</div>
<div class="newsletter-element">
<input type="text" placeholder="Email address" name="mail" required>
</div>
<div class="newsletter-element">
<input type="submit" value="Subscribe">
</div>
</div>
<!-- newletter container -->
</form>
</section>
<footer id="footer">
<div>
<p>All Right Reserved</p>
</div>
</footer>
</div>
</body>
</html>
.nav-bar{
grid-area: nav;
display: flex;
flex-direction: row;
border: 1px solid red;
align-items: center;
height: 100px;
padding: 10px;
}
you have the padding:10px in your css code, the padding attribute puts some margin over were the .nav-bar tag is applied, you have to change it to padding:0px or remove it completely
I think the problem is about your "div" elements, ´´´<div id="grid-layout> ´´´ in HTML is working as the body of the code, I tried some solutions about this but I am also kınd a new in this too.
it was a typo instead of "grid-template-column" "grid-template-row" I had "grid-column" "grid-row"
I am trying to get the articles of my section to display exactly like this (with the third article centered when expanded to a fuller browser width): https://www.screencast.com/t/vGdpZ91l
I've explored all the display options of CSS. The current CSS is set to display: inline-flex;
Here is my CSS/HTML. Help would be much appreciated.
.places h1 {
align-content: top-left;
font-size: 30px;
}
.places article {
display: inline-flex;
width: 390px;
border: #FF5A5F 1px solid;
border-radius: 4px;
padding: 20px;
margin: 20px;
}
.places article h2 {
font-size: 30px;
text-align: center;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="7-places.css" media="all">
</head>
<body>
<header>
</header>
<div class="container">
<section class="places">
<h1>Places</h1>
<article class="home">
<h2>Home</h2>
</article>
<article class="apartment">
<h2>Apartment</h2>
</article>
<article class="dorm">
<h2>Dorm</h2>
</article>
</section>
</div>
</body>
</html>
Use flex on the parent, and set it to flex-wrap: wrap; justify-content: center;.
.places {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.places h1 {
align-content: top-left;
font-size: 30px;
width: 100%;
}
.places article {
width: 390px;
border: #FF5A5F 1px solid;
border-radius: 4px;
padding: 20px;
margin: 20px;
}
.places article h2 {
font-size: 30px;
text-align: center;
}
<div class="container">
<section class="places">
<h1>Places</h1>
<article class="home">
<h2>Home</h2>
</article>
<article class="apartment">
<h2>Apartment</h2>
</article>
<article class="dorm">
<h2>Dorm</h2>
</article>
</section>
</div>