I'm having an odd issue, I'm new to using the #mixin and #content tag, and sass in general for that matter, but for some reason, my grid-template-areas don't accurately represent what I want them to.
HTML
<header>
<div class="text"></div>
<nav>
<div class="about"></div>
<div class="qualities"></div>
<div class="portfolio"></div>
<div class="contact"></div>
</nav>
</header>
SCSS
$colors: (
red: red,
blue: blue
);
#function border($color) {
#return 3px map-get($colors, $color) solid;
}
#mixin desktop {
#media only screen and (min-width: 768px) {
#content;
}
}
header {
grid-area: header;
border: border(red);
display: grid;
grid-template-columns: 3fr 1fr;
grid-template-areas: "header-title nav";
.text {
grid-area: header-title;
border: 3px green solid;
}
nav {
grid-area: nav;
border: border(blue);
}
#include desktop {
grid-template-columns: 4fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: "header-title header-about header-q header-port header-contact";
.about {
grid-area: header-about;
border: border(blue);
}
.qualities {
grid-area: header-q;
border: border(blue);
}
.portfolio {
grid-area: header-port;
border: border(blue);
}
.contact {
grid-area: header-contact;
border: border(blue);
}
}
}
To see this issue... jsfiddle
It should go from splitting the header into 2 columns to splitting the header into 5 columns;
Related
The grid-template-areas is being used here. However, the main area is not taking up the rest of the area, and I dont need aside for my project.
How can I make the main area take up the rest of the area?
.container {
display: grid;
grid-template-areas: "header header header" "nav content side" "footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
grid-gap: 10px;
height: 100vh;
}
header {
grid-area: header;
border: 1px solid #61dafb;
}
nav {
grid-area: nav;
margin-left: 0.5rem;
border: 1px solid red;
}
main {
grid-area: content;
border: 1px solid blue;
}
footer {
grid-area: footer;
border: 1px solid black;
}
#media (max-width: 768px) {
.container {
grid-template-areas: "header" "nav" "content" "side" "footer";
grid-template-columns: 1fr;
grid-template-rows: auto/* Header */
minmax(75px, auto)/* Nav */
1fr/* Content */
minmax(75px, auto)/* Sidebar */
auto;
/* Footer */
}
nav,
aside {
margin: 0;
}
}
header {
grid-area: header;
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="container">
<header>
<div>Header</div>
</header>
<nav>
<div>nav</div>
</nav>
<main>
</main>
<footer>
<div>Footer</div>
</footer>
</div>
Attaching JSfiddle https://jsfiddle.net/fgmwe281/2/
I am trying to use grid-template-areas for my boilerplate code for layout. However, unable to get the main content to take up the space on right(the area for aside).
I would skip grid-template-areas completely. It is nice for beginners as it visually displays the areas but overall it increases the size of necessary code. On top of that, it is easier to just skip it and letting the header and the footer span the entire with by using grid-column: 1 / -1;.
If you change the grid-template-columns to min-content auto min-content then the sidebar and the navigation will only consume as much space as needed. In this case, I sued the width on the containing div. If it exist then it will consume 200px width, if it doesn't, then it will consume no space:
body {
margin: 0;
}
.container {
display: grid;
grid-template-columns: min-content auto min-content;
grid-gap: 10px;
min-height: 100vh;
}
header,
footer {
grid-column: 1 / -1;
}
nav > div,
aside > div {
width: 200px;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
}
#media only screen
and (max-width: 768px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr auto auto;
}
}
#media only screen
and (min-width: 769px) {
.container {
grid-template-rows: auto 1fr auto;
}
}
header {
border: 1px solid #61dafb;
}
nav {
border: 1px solid red;
}
main {
border: 1px solid blue;
}
footer {
border: 1px solid black;
}
<div class="container">
<header>
<div>Header</div>
</header>
<nav>
<div>nav</div>
</nav>
<main>
<div>main</div>
</main>
<aside></aside>
<footer>
<div>Footer</div>
</footer>
</div>
I have this grid over here:
and i want the first big card to take the whole height of the wrapper and remain the same width, while the bottom two cards go to the right, somehow like this:
here's my css/html code where item-1 is the bigger card on the top-left:
.cards-wrapper {
background-color: #43cbff;
width: 1240px;
height: 380px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: 20px;
#media (min-width: 30em) {
grid-template-columns: 1fr 1fr;
}
#media (min-width: 60em) {
grid-template-columns: repeat(4, 1fr);
}
}
.cards {
display: flex;
flex-direction: column;
min-height: 100%;
position: relative;
top: 0;
background-color: aquamarine;
border: 1px solid lightgrey;
border-radius: 8px;
}
.item-1 {
#media (min-width: 60em) {
grid-column: 1 / span 2;
h1 {
font-size: 24px;
}
}
}
You can keep the grid layout and use grid-template-areas to make that first item take up the full height whilst retaining its existing width.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
gap: 8px 8px;
grid-auto-flow: row;
grid-template-areas:
"one one two three"
"one one four five";
}
.container * {
background: orange;
}
.one { grid-area: one; }
.two { grid-area: two; }
.three { grid-area: three; }
.four { grid-area: four; }
.five { grid-area: five; }
<div class="container">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>
Flex version
I dont know you entire structure and your requirement. But by using only flexbox you can archive this also quite easy.:
.cards-wrapper {
background: gray;
}
.flex {
display: flex;
gap:5px;
}
.left, .right {
width: 50%;
}
.right {
flex-wrap: wrap;
justify-content: center;
}
.right > div {
width: 49,2%;
background-color: lightgreen;
height:100px;
}
.big {
background-color: green;
width: 100%;
}
<div class="cards-wrapper flex">
<div class="left flex">
<div class="big">BIG</div>
</div>
<div class="right flex">
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
The objective is to insert side margins for wider screens, while keeping the header span the entire width.
Normally we'd write
.inner {
margin: 0 5%;
}
to get such margins, but it turns out that HTML grids are so flexible that they make side margins possible through dead grid DIVs.
But somehow using dead DIVs does not seem quite right. Is there a way to obtain side margins within a grid. I see how this can be done with a blend of flex and grid. Here I'm wondering if it can be done with grids alone.
body {
height: 100vh; margin: 0; display: flex;
}
.outer{
margin: 5px; border: 5px; padding: 5px;
display: flex;
flex-grow: 1;
}
.inner {
flex-grow: 1;
margin: 5px; border: 5px; padding: 5px; grid-gap: 5px;
display: grid;
grid-template-rows: 100px 5fr 100px;
grid-template-columns: 1fr;
grid-template-areas: "header" "content" "side";
}
#media screen and (min-width: 600px) {
.inner {
grid-template-rows: 100px 6fr;
grid-template-columns: 5fr 100px;
grid-template-areas:
"header header"
"content side";
}
}
#media screen and (min-width: 800px) {
.inner {
grid-template-rows: 100px 6fr;
grid-template-columns: 1fr 5fr 100px 1fr;
grid-template-areas:
"header header header header"
"leftmargin content side rightmargin";
}
}
.box {
padding: 10px; margin: 5px;
border: 5px solid #444;
background-color: #eee;
font-size: 150%;
position: relative;
}
.header { grid-area: header; }
.content { grid-area: content; }
.side { grid-area: side; }
.leftmargin { grid-area: leftmargin; }
.rightmargin { grid-area: rightmargin; }
<div class="outer">
<div class="inner">
<div class="box header">Header</div>
<div class="box content">Content</div>
<div class="box side">Side</div>
</div>
</div>
Use dots (.) to declare empty grid areas:
grid-template-areas:
"header header header header"
". content side .";
Example:
body {
height: 100vh;
margin: 10px;
}
.inner {
display: grid;
grid-template-rows: 100px 5fr 100px;
grid-template-columns: 1fr;
grid-template-areas: "header" "content" "side";
grid-gap: 5px;
}
#media screen and (min-width: 600px) {
.inner {
grid-template-rows: 100px 6fr;
grid-template-columns: 5fr 100px;
grid-template-areas:
"header header"
"content side";
}
}
#media screen and (min-width: 800px) {
.inner {
grid-template-rows: 100px 6fr;
grid-template-columns: 5% 5fr 100px 5%;
grid-template-areas:
"header header header header"
". content side .";
}
}
.box {
padding: 10px; margin: 5px;
border: 5px solid #444;
background-color: #eee;
font-size: 150%;
position: relative;
}
.header { grid-area: header; }
.content { grid-area: content; }
.side { grid-area: side; }
<div class="inner">
<div class="box header">Header</div>
<div class="box content">Content</div>
<div class="box side">Side</div>
</div>
I want the area in red to always fit the content so that the area below (the commenting section) is always right after and not down below.
In chrome, it works, but not in Firefox (see picture).
I thought that by adding grid-template-rows: max-content; it will make it happen, but apparently not.
So, how to make the red area always fit the content so the commenting area is right after.
https://jsfiddle.net/mjb7cehy/
HTML and CSS
.gridAB {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas: "body" "aside" "comment";
grid-gap: 40px;
}
#media screen and (min-width: 768px) {
.gridAB {
grid-template-columns: 2fr 1fr;
grid-template-rows: max-content;
grid-template-areas: "body aside" "comment aside";
}
}
.gridAB .aside {
grid-area: aside;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: 20px;
align-content: flex-start;
}
.gridAB .body {
grid-area: body;
background-color: red;
}
.gridAB .album {
background-color: pink;
}
.gridAB .credit {
background-color: green;
}
.gridAB .version {
background-color: yellow;
}
.gridAB .comment {
grid-area: comment;
background-color: #eee;
}
<div class="gridAB">
<div class="body">body goes here</div>
<div class="aside">
<div class="album">album</div>
<div class="credit">credits</div>
<div class="version">version</div>
</div>
<div class="comment">comments go here</div>
</div>
Try
grid-template-rows: 0fr 1fr;
will work: Please find updated example link: jsfiddle
I'm starting to use CSS grid. So far, so good. I want some grid areas NOT to expand when other areas do.
This is what i have now
I'm designing mobile first, then desktop. The grid on the desktop, if you notice, the 'album' area expands when the body expands. I don't want that. I want the areas 'album', 'credits', 'version' to retain the height even if the 'body' or the 'comment' area expand. In other words, when a grid area expands, the other areas height remain intact.
https://jsfiddle.net/e9n4ac5d/
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas: "body" "album" "credit" "version" "comment";
}
#media screen and (min-width: 400px) {
.grid {
grid-template-columns: 2fr 1fr;
grid-template-rows: auto;
grid-template-areas: "body album" "comment credit" "comment version";
}
}
.body {
grid-area: body;
background-color: red;
}
.album {
grid-area: album;
background-color: pink;
}
.credit {
grid-area: credit;
background-color: green;
}
.version {
grid-area: version;
background-color: yellow;
}
.comment {
grid-area: comment;
background-color: #eee;
}
<div class="grid">
<div class="body">body
<br><br><br><br><br><br>
</div>
<div class="album">album</div>
<div class="credit">credits</div>
<div class="version">version</div>
<div class="comment">comments</div>
</div>
You can change your HTML structure like this:
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas: "body" "album" "credit" "version" "comment";
}
#media screen and (min-width: 400px) {
.right {
grid-area: right;
}
.grid {
grid-template-columns: 2fr 1fr;
grid-template-rows: auto;
grid-template-areas: "body right" "comment right";
}
}
.body {
grid-area: body;
background-color: red;
}
.album {
grid-area: album;
background-color: pink;
height: 50px;
}
.credit {
grid-area: credit;
background-color: green;
height: 50px;
}
.version {
grid-area: version;
background-color: yellow;
height: 50px;
}
.comment {
grid-area: comment;
background-color: #eee;
}
<div class="grid">
<div class="body">body
<br><br><br><br><br><br>
</div>
<div class="right">
<div class="album">album</div>
<div class="credit">credits</div>
<div class="version">version</div>
</div>
<div class="comment">comments</div>
</div>
Just set fixed height and width... To make it non expandable and non compressible...