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 >
<span>Hola</span>
</section>
<section >
<ul>
<li><a href="">Instagram</a></li>
<li><a href="">Twitter</a></li>
<li><a href="">Facebook</a></li>
</ul>
</section>
</aside>
<header>
<nav>
<a href="">G6</a>
<ul>
<li><a href="">Buy NFT</a></li>
<li><a href="">Whitepaper</a></li>
<li><a href="">Feeding</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Connect Wallet</a></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>
CodePudding user response:
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 >
<span>Hola</span>
</section>
<section >
<ul>
<li><a href="">Instagram</a></li>
<li><a href="">Twitter</a></li>
<li><a href="">Facebook</a></li>
</ul>
</section>
</aside>
<header>
<nav>
<a href="">G6</a>
<ul>
<li><a href="">Buy NFT</a></li>
<li><a href="">Whitepaper</a></li>
<li><a href="">Feeding</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Connect Wallet</a></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>