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.
Related
I am starting with CSS and I have a doubt, I do not understand why the section . aside2, takes the width based on the text that puts it inside and not the one specified in the grid of the body, what I want to do is to have the links of. aside2 rotated but with the width assigned in the grid-template-columns and not that I take it depending on whether I add more text or not, and understand why I will not, to see if someone can help me
*fill text because it says my post is mostly code, fill text because it says my post is mostly code
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
color: white;
}
body{
background-color: rgb(17, 17, 17);
display: grid;
grid-template-columns: 140px 1fr;
grid-template-rows: 80px 1fr;
height: 100vh;
}
aside{
grid-column: 1/2;
grid-row: 1/3;
width: 100%;
display: grid;
}
.aside1{
background: rgb(116,191,244);
background: linear-gradient(0deg, rgba(116,191,244,1) 0%, rgba(255,162,222,1) 100%);
box-shadow: 30px 0px 192px 100px rgba(0,43,255,0.15);
}
.aside2{
box-sizing: border-box;
display:flex;
justify-content: center;
align-items: center;
}
.aside2 ul{
display: flex;
transform: rotate(-90deg);
}
.aside2 ul li{
}
.aside2 ul li a{
color: white;
}
header{
grid-column: 2/3;
grid-row: 1/2;
}
main{
grid-column: 2/3;
grid-row: 2/3;
}
h1{
font-size: 50px;
}
<!DOCTYPE html>
<html lang="es">
<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>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<aside>
<section class="aside1">
<span>Hola</span>
</section>
<section class="aside2">
<ul>
<li>Instagram</li>
<li>Twitter</li>
<li>Facebook</li>
</ul>
</section>
</aside>
<header>
<nav>
G6
<ul>
<li>Buy NFT</li>
<li>Whitepaper</li>
<li>Feeding</li>
<li>FAQ</li>
<li>Connect Wallet</li>
</ul>
</nav>
</header>
<main>
<section>
<h1>Discover rare digital art and collect NFTs</h1>
<div>
<img src="" alt="a">
<img src="" alt="b">
<img src="" alt="c">
</div>
<img src="" alt="FOTO NFT">
</section>
<div>
<img src="" alt="Una">
<img src="" alt="Dos">
</div>
</main>
</body>
</html>
A couple of things right off the get-go. You don't need to use flex-box on your grid children with align/justify-center to center them.
Simply add place-items: center; on your parent with the main grid as an alternative.
After that, just specify height and width: 100%; on your grid children so it fills the remaining space.
Moving on to aside2 taking the max-content width. You'll notice that now that each parent (aside1 & aside2) has a defined width and height, you can define a width and height on your ul which will take up the entire space vertically and horizontally if specified. Your aside2 class should look like this:
.aside2 > ul {
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
flex-direction: column;
}
Noticed I removed the transform: rotate. You should see something like this: View Image.
Then just set your transform on the li like so:
.aside2>ul>li {
transform: rotate(-90deg);
}
See it working here:
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
color: white;
}
body {
background-color: rgb(17, 17, 17);
display: grid;
grid-template-columns: 140px 1fr;
grid-template-rows: 80px 1fr;
height: 100vh;
}
aside {
grid-column: 1/2;
grid-row: 1/3;
width: 100%;
display: grid;
place-items: center;
}
.aside1 {
background: rgb(116, 191, 244);
background: linear-gradient(0deg, rgba(116, 191, 244, 1) 0%, rgba(255, 162, 222, 1) 100%);
box-shadow: 30px 0px 192px 100px rgba(0, 43, 255, 0.15);
width: 100%;
height: 100%;
}
.aside2 {
box-sizing: border-box;
width: 100%;
height: 100%;
}
.aside2 > ul {
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
flex-direction: column;
}
.aside2>ul>li {
transform: rotate(-90deg);
}
.aside2 ul li a {
color: white;
}
header {
grid-column: 2/3;
grid-row: 1/2;
}
main {
grid-column: 2/3;
grid-row: 2/3;
}
h1 {
font-size: 50px;
}
<!DOCTYPE html>
<html lang="es">
<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>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<aside>
<section class="aside1">
<span>Hola</span>
</section>
<section class="aside2">
<ul>
<li>Instagram</li>
<li>Twitter</li>
<li>Facebook</li>
</ul>
</section>
</aside>
<header>
<nav>
G6
<ul>
<li>Buy NFT</li>
<li>Whitepaper</li>
<li>Feeding</li>
<li>FAQ</li>
<li>Connect Wallet</li>
</ul>
</nav>
</header>
<main>
<section>
<h1>Discover rare digital art and collect NFTs</h1>
<div>
<img src="" alt="a">
<img src="" alt="b">
<img src="" alt="c">
</div>
<img src="" alt="FOTO NFT">
</section>
<div>
<img src="" alt="Una">
<img src="" alt="Dos">
</div>
</main>
</body>
</html>
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'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>
I am tryin to do the following layout:
And I have got this code for nav bar:
<nav>
<ul>
<li>Home</li>
<li>Book summary</li>
<li>About us</li>
<li>Contact us</li>
<li>Purchase</li>
</ul>
</nav>
then I have two column div like this:
<div class="row">
<div class="column" style="background-color:none;">
<h2>bla bla bla</h2>
<p>
<img src="https://i.imgur.com/ZdhtRrp.png" alt="bookshelf">
</p>
</div>
<div class="column" style="background-color:none;">
How to make a bottom div below the two column div
You can achieve this with either a flexbox or a grid system.
Flexbox. All you have to do is to set your wrapping element display to flex and then make horizontal item alignment with justify-content and vertical alignment with align-items.
nav>ul {
display: flex;
justify-content: flex-start;
align-items: center;
}
nav>ul>li {
margin: 0 10px;
}
.row {
display: flex;
align-items: center;
}
.row>.column {
margin: 0 5px;
padding: 5px;
}
.bottom-row {
display: flex;
justify-content: center;
}
<nav>
<ul>
<li>Home</li>
<li>Book summary</li>
<li>About us</li>
<li>Contact us</li>
<li>Purchase</li>
</ul>
</nav>
<div class="row">
<div class="column" style="background-color:none;">
<h2>bla bla bla</h2>
<p>
<img src="https://i.imgur.com/ZdhtRrp.png" alt="bookshelf">
</p>
</div>
<div class="column" style="background-color:none;">this is another column</div>
</div>
<div class="bottom-row">bottom row</div>
Grid. the grid will be something like this. To achieve this with the grid you should predefine the page layout with grid-template-areas and then specify each element to sit on their place.
body {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas: "nav nav" "column1 column2" "bottom-row bottom-row";
width: 100%;
height: 100%;
margin: 0;
}
nav {
grid-area: nav;
align-self: center;
}
.column1 {
grid-area: column1;
}
.column2 {
grid-area: column2;
align-self: center;
}
.bottom-row {
grid-area: bottom-row;
justify-self: center;
}
<nav>
<ul>
<li>Home</li>
<li>Book summary</li>
<li>About us</li>
<li>Contact us</li>
<li>Purchase</li>
</ul>
</nav>
<div class="column1" style="background-color:none;">
<h2>bla bla bla</h2>
<p>
<img src="https://i.imgur.com/ZdhtRrp.png" alt="bookshelf">
</p>
</div>
<div class="column2" style="background-color:none;">this is another column</div>
<div class="bottom-row">bottom row</div>
More Notes on Grid system
To get started you have to define a container element as a grid with display: grid set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row.
display: grid. Defines the element as a grid container and establishes a new grid formatting context for its contents.
grid-template-rows or grid-template-columns. Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line.
grid-column or grid-row. Shorthand for grid-column-start + grid-column-end, and grid-row-start + grid-row-end, respectively.
You can use grid:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"nav nav"
"div1 div2"
"div_bot div_bot";
width: 100%;
height: 100%;
margin: 0;
}
body > nav{
grid-area: nav;
background-color: tan;
}
#div1{
grid-area: div1;
background-color: red;
}
#div2{
grid-area: div2;
background-color: blue;
}
#div_bot{
grid-area: div_bot;
background-color: green;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>Book summary</li>
<li>About us</li>
<li>Contact us</li>
<li>Purchase</li>
</ul>
</nav>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div_bot">Bottom Div</div>
</body>
</html>
i would go with a grid system
<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';
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>
<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>
My guess would be to set the following <div> opening tag to: <div style="width=100%;">.