How do I expand the inner most grid to take up more space to the right. I want it to be the same width from its left side. There is a big gap to the right of the inner most div. The entire project can be see at this codepen: https://codepen.io/centem/pen/oNvZLgP?editors=1100
CSS
.inner-header {
background-color: #96ceb4;
}
.header :nth-child(2) {
padding: 0 40px;
}
.inner-menu {
background-color: #ff6f69;
}
.inner-content {
background-color: #ffcc5c;
}
.inner-footer {
background-color: #88d8b0;
}
.inner-grid-page > div {
color: #ffeead;
display: flex;
align-items: center;
padding: 0px 20px;
}
.inner-grid-page {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 20px 150px 20px;
}
.inner-header {
grid-column: span 12;
display: flex;
}
.inner-header > div:nth-child(3) {
margin-left: auto;
}
.inner-menu {
grid-column: span 2;
}
.inner-content {
grid-column: span 10;
}
.inner-footer {
grid-column: span 12;
}
We can just add width: 100% -:
.inner-grid-page {
display: grid;
width: 100%;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 20px 150px 20px;
}
For item inside flex, if you want it to take up space set flex-grow: 1 or flex: 1
.inner-grid-page {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 20px 150px 20px;
flex: 1;
}
Related
Can anyone tell me if there is any framework used to write this CSS Snippet or it's pure CSS. The reason I am asking is because it's differently formated than what I have seen. Code below:
.hero { padding-block-start: calc(var(--section-padding) + 80px); }
.hero .container {
grid-template-columns: 0.8fr 1fr;
align-items: center;
gap: 100px;
}
.hero-content { text-align: left; }
.hero .btn-wrapper { justify-content: flex-start; }
/**
* ABOUT
*/
.about .wrapper {
grid-template-columns: 1fr 1fr;
align-items: center;
}
.about .grid-list { grid-template-columns: repeat(4, 1fr); }
/**
* PROJECT
*/
.project .grid-list {
grid-template-columns: 1fr 1fr;
row-gap: 50px;
}
.project .grid-list > li:nth-child(-n+2) { grid-column: 1 / 3; }
.project-card-1,
.project-card-2 {
flex-direction: row;
align-items: flex-end;
}
:is(.project-card-1, .project-card-2) .card-content { width: 33.33%; }
:is(.project-card-1, .project-card-2) .card-banner { width: 66.66%; }
.project-card-1 .card-content { padding-block-end: var(--padding); }
.project-card-2 .card-content { order: 1; }
Just wondering if there is any framework involved as usually css is structured like:
.header {
color: white;
}
I am trying to achieve this effect using flexbox and without media query. Can i get this effect with the grid?
desktop -> tablet -> mobile:
Sure, You can achieve something like this using flexbox. I believe the easiest way to do this would be having a main container for all three blocks, and a sub-container for the first two blocks that'll move. Here's a working example:
.container, .subcontainer {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.container {
width: 100%;
}
.subcontainer {
width: 50%;
min-width: 125px;
}
#block1, #block2, #block3 {
margin-bottom: 50px;
width: 100px;
height: 100px;
}
#block1 {
background-color: peru;
margin-right: 25px;
}
#block2 {
background-color: darkorange;
margin-right: -50px;
}
#block3 {
background-color: orange;
height: unset;
min-height: 100px;
display: flex;
align-items: stretch;
}
<div class="container">
<div class="subcontainer">
<div id="block1"></div>
<div id="block2"></div>
</div>
<div id="block3"></div>
</div>
Here's an alternate solution, using flexbox, grid, and #media queries. Easier to use flexbox on the 1st and 3rd picture because they have one dimension/direction. With the 2nd picture it's easier to use grid as it's more of a 2D layout that requires you to mind the horizontal and vertical of elements to set up properly.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: space-evenly;
height: 80vh;
margin: 3rem;
}
.container>div {
border: 1px solid black;
display: grid;
width: 10rem;
place-content: center;
}
#media screen and (max-width: 992px) {
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 1rem;
}
.b {
grid-column: 1/2;
grid-row: 2/3;
}
.c {
grid-column: 2/3;
grid-row: span 2;
}
}
#media screen and (max-width: 600px) {
.container {
display: flex;
flex-direction: column;
}
.container>div {
flex: 1;
}
}
<div class="container">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>
I try to make a page on CSS Grid with 100% heigth but hen I put an image in its container and I reduce the window, the content overflows vertically on my other container. It's only happened on a page based on 100vh.. I tried hard only with Grid proprieties but nothing works
Someone has a solution ?
My current code : https://jsfiddle.net/kxaobqcr/3/
HTML
<header>
<div class="type"> <h1>Title</h1> </div>
<div class="nav">
x
x
x
x
x
x
</div>
</header>
<section class="content">
<div class="library"> <img src="https://i.pinimg.com/originals/2d/8f/3e/2d8f3ef4a6bac30d0a4c7a44f7b3d574.jpg" alt="">
</div>
</section>
</body>
CSS
html,body {
margin: 0;
padding: 0;
height: 100%;
width: auto;
font-family: 'Libre Baskerville', serif;
}
body {
display: grid;
width: 100vw;
height: 100vh;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
grid-gap: 10px 10px;
}
header {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-row: 1/ 3;
grid-column: 1/ 13;
grid-gap: 10px 10px;
background-color: grey;
}
.type {
display: grid;
grid-row: 1/ 2;
grid-column: 1/ 8;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
align-self: center;
background-color: lightcoral;
}
.nav {
display: grid;
grid-row: 2/ 3;
grid-column: 1/ 8;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: 1fr;
align-self: center;
background-color: crimson;
}
a {
color: black;
text-decoration: none;
padding: 10px;
}
img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
.content {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
grid-column: 1/ 13;
grid-row: 3 / 13;
grid-gap: 10px 10px;
}
.library {
grid-column: 4/ 10;
grid-row: 4 / 10;
justify-self: center;
align-self: center;
}
I am still learning Grid Layout, some advices for minimize my CSS code would be welcomed :-)
I try to make this view as simple as I can
This is a link of jsfiddle, have a look: https://jsfiddle.net/dupinderdhiman/zum2kxpw/5/
a{
padding: 10px;
border-top: 1px solid blue;
border-bottom: 1px solid blue;
}
img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col-12">
<h1>Title</h1>
</div>
<div class="col-12">
<div class="nav">
x
x
x
x
x
x
</div>
</div>
</div>
<div class="row">
<div class='col-12 mt-1'>
<img src="https://i.pinimg.com/originals/2d/8f/3e/2d8f3ef4a6bac30d0a4c7a44f7b3d574.jpg" alt="">
</div>
</div>
</div>
I found a solution. Delete align-items on css code and the overflow problem disappears. To center the image just use margin: auto.
New code : https://jsfiddle.net/k1fmodv5/
CSS
html,body {
margin: 0;
padding: 0;
height: 100%;
width: auto;
font-family: 'Libre Baskerville', serif;
}
body {
display: grid;
width: 100vw;
height: 100vh;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
grid-gap: 10px 10px;
}
header {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-row: 1/ 3;
grid-column: 1/ 13;
grid-gap: 10px 10px;
background-color: grey;
}
.type {
display: grid;
grid-row: 1/ 2;
grid-column: 1/ 8;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
align-self: center;
background-color: lightcoral;
min-height: 0;
}
.nav {
display: grid;
grid-row: 2/ 3;
grid-column: 1/ 8;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: 1fr;
align-self: center;
background-color: crimson;
}
a {
color: black;
text-decoration: none;
padding: 10px;
}
img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
.content {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
grid-column: 1/ 13;
grid-row: 3 / 13;
grid-gap: 10px 10px;
}
.library {
grid-column: 4/ 10;
grid-row: 4 / 10;
margin:auto;
}
Thank you all for your help !
I am exploring CSS Grid and I am having trouble because the size doesn't use full height and my HTML and body is [width, height 100%]. I have a large white section how do I make it snap to whatever is top?
Any suggestion will be appreciated.
Here is my CSS.
*,** {
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box;
}
html{
margin: 0;
padding:0;
width: 100%;
height: auto;
}
.grid {
margin: 0;
display: grid;
grid-template-columns: 100%;
grid-template-rows: repeat(auto, 4);
/* grid-template-rows: 13% auto 20%; */
grid-template-areas:
"header"
"main";
#media screen and (min-width: 500px) {
grid-template-columns: auto;
grid-template-rows: repeat(auto, 3);
grid-template-areas:
"header header"
"main main"
"main main";
}
#media screen and (min-width: 800px) {
grid-template-columns: 30% auto;
grid-template-rows: repeat(auto, 3);
grid-template-areas:
"header header"
"sidebar main"
"sidebar2 main";
}
A concern is if I mess with positions it makes things fly left...
You can use vh units, calc and min-height like:
header { grid-area: header; height: 80px; }
nav { grid-area: sidebar; }
main { grid-area: main; min-height: calc(100vh - 80px); } /* subtract header height */
aside { grid-area: sidebar2; }
Here is an example (I've changed the sizes a bit to work on stackoverflow):
*, ** {
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box;
}
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
margin: 0;
min-height: 100%;
}
.grid {
margin: 0;
display: grid;
min-height: 100vh;
grid-template-columns: 100%;
grid-template-rows: repeat(auto, 4);
/* grid-template-rows: 13% auto 20%; */
grid-template-areas: "header" "main";
}
#media screen and (min-width: 200px) {
.grid {
grid-template-columns: auto;
grid-template-rows: repeat(auto, 3);
grid-template-areas: "header header" "main main" "main main";
}
}
#media screen and (min-width: 400px) {
.grid {
grid-template-columns: 30% auto;
grid-template-rows: repeat(auto, 3);
grid-template-areas: "header header" "sidebar main" "sidebar2 main";
}
}
header {
background: tomato;
grid-area: header;
height: 40px;
}
nav {
background: gold;
grid-area: sidebar;
}
main {
background: olive;
grid-area: main;
min-height: calc(100vh - 40px);
}
aside {
background: orange;
grid-area: sidebar2;
}
<div class="grid">
<header>Header</header>
<nav>Sidebar</nav>
<main>Main</main>
<aside>Sidebar 2</aside>
</div>
I've got a nifty responsive css template using css grids and I'd like to make the header of this responsive css grid sticky, but because of the way the header and nav is designed, I can't get it to use fixed positioning.
is there a better way of doing this with some grid property I might not have seen yet?
* {
margin: 0;
padding: 0;
}
body {
display: grid;
font-family: sans-serif;
}
a {
text-decoration: none;
color: white;
}
header,
nav {
background: blue;
color: #fff;
position: fixed;
}
nav {
display: flex;
flex-wrap: wrap;
align-items: center;
}
nav span {
margin-right: auto;
}
header {
display: none;
}
aside {
background: lightgreen;
}
main {
background: pink;
}
/* mobile */
#media (max-width: 767px) {
body {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
nav,
aside,
main {
grid-column: 1 / 1;
padding: 0 15px;
}
}
/* tablets */
#media (min-width: 768px) {
body {
grid-template-columns: 275px 1fr;
grid-template-rows: 1fr 1fr;
}
nav {
grid-column: 1 / 4;
grid-row: 1;
height: 50px;
grid-row: 1;
}
aside {
grid-column: 1;
}
main {
grid-column: 2;
}
nav,
aside,
main {
padding: 0 15px;
}
}
/* desktops */
#media (min-width: 992px) {
body {
grid-template-columns: 10% 275px 1fr 10%;
grid-template-rows: 1fr 1fr;
}
header {
display: block;
grid-column: 1 / -1;
grid-row: 1;
}
nav {
grid-column: 2 / 4;
grid-row: 1;
}
aside {
grid-column: 2 / 3;
}
main {
grid-column: 3 / 4;
}
}
/* xl desktops */
#media (min-width: 1920px) {
body {
grid-template-columns: 1fr minmax(auto, 300px) minmax(auto, 1620px) 1fr;
grid-template-rows: 1fr 1fr;
}
}
<header></header>
<nav>
<span>Logo</span>
login
</nav>
<aside>aside</aside>
<main>main</main>
https://jsfiddle.net/90kotz8d/3/
Using position: fixed; will take it out of the flow, and thus won't be part of your grid system. To achieve this, you can use the non-standard position: sticky; with top: 0;, the fallback being it behaving like a non-sticky element.
Here, I'm assuming the nav element is your header, since your header is set to display: none; but the position property can be moved to any element of your grid (why put header in your markup if you're not going to show it?)
* {
margin: 0;
padding: 0;
}
body {
display: grid;
font-family: sans-serif;
}
a {
text-decoration: none;
color: white;
}
header,
nav {
background: blue;
color: #fff;
position: fixed;
}
nav {
position: -webkit-sticky;
position: sticky;
top: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
}
nav span {
margin-right: auto;
}
header {
display: none;
}
aside {
background: lightgreen;
}
main {
background: pink;
}
/* mobile */
#media (max-width: 767px) {
body {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
nav,
aside,
main {
grid-column: 1 / 1;
padding: 0 15px;
}
}
/* tablets */
#media (min-width: 768px) {
body {
grid-template-columns: 275px 1fr;
grid-template-rows: 1fr 1fr;
}
nav {
grid-column: 1 / 4;
grid-row: 1;
height: 50px;
grid-row: 1;
}
aside {
grid-column: 1;
}
main {
grid-column: 2;
}
nav,
aside,
main {
padding: 0 15px;
}
}
/* desktops */
#media (min-width: 992px) {
body {
grid-template-columns: 10% 275px 1fr 10%;
grid-template-rows: 1fr 1fr;
}
header {
display: block;
grid-column: 1 / -1;
grid-row: 1;
}
nav {
grid-column: 2 / 4;
grid-row: 1;
}
aside {
grid-column: 2 / 3;
}
main {
grid-column: 3 / 4;
}
}
/* xl desktops */
#media (min-width: 1920px) {
body {
grid-template-columns: 1fr minmax(auto, 300px) minmax(auto, 1620px) 1fr;
grid-template-rows: 1fr 1fr;
}
}
<header></header>
<nav>
<span>Logo</span>
login
</nav>
<aside>aside</aside>
<main>main</main>