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;
}
Related
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 am unable to get ellipsis working in CSS grid
I've tried the following:
Parent Grid Container:
overflow: hidden;
Child Grid Item:
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
Code Sample:
https://jsfiddle.net/eternalshenron/xvm82jpd/20/
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.overflow {
overflow: hidden;
}
#media only screen and (max-width: 480px) {
nb-card-header {
border-bottom: none;
text-align: right;
padding: 0 1.25rem;
padding-top: 1rem;
}
.h1-card {
font-family: Open Sans, sans-serif;
font-weight: 550;
font-size: 80%;
color: #373737;
}
.h2-card {
font-family: Open Sans, sans-serif;
font-size: 75%;
font-weight: 550;
color: #373737;
}
.h3-card {
font-family: Open Sans, sans-serif;
font-size: 70%;
color: #545454;
}
.h4-card {
font-family: Open Sans, sans-serif;
font-size: 70%;
color: #373737;
}
.card-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "location misc-details";
margin: 0%;
padding: 0%;
}
.location {
grid-area: location;
display: grid;
grid-template-columns: min-content 1fr;
grid-template-areas: "seperator from-to";
}
.from-to {
grid-area: from-to;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-areas: "location-1"
"location-2"
}
.location-1 {
padding-left: 10px;
padding-right: 15px;
grid-area: location-1;
align-self: top;
justify-self: left;
text-align: left;
}
.location-2 {
padding-left: 10px;
padding-right: 15px;
grid-area: location-2;
align-self: flex-end;
justify-self: left;
text-align: left;
min-width: 0;
max-width: 100%;
}
.loc {
margin-bottom: 0px;
}
.seperator {
grid-area: seperator;
align-items: center;
display: grid;
grid-template-rows: min-content 1fr min-content;
grid-template-areas: "dot-start"
"line"
"dot-end";
}
.line {
width: 1px;
background-color: #ccc;
height: 100%;
border: 0px solid black;
justify-self: center;
}
.dot-start {
grid-area: dot-start;
justify-self: center;
align-self: center;
}
.dot-end {
grid-area: dot-end;
justify-self: center;
align-self: center;
margin-bottom: 2.65em;
}
.misc-details {
grid-area: misc-details;
display: grid;
justify-self: right;
grid-template-rows: 1fr max-content 1fr;
grid-template-areas: "vehicle-type"
"seperator-2"
"other-details";
}
.vehicle-load {
grid-area: vehicle-type;
display: grid;
width: 100%;
grid-template-columns: max-content;
grid-template-areas: "vehicle"
"load-size";
}
.vehicle {
grid-area: vehicle;
display: grid;
justify-self: center;
grid-template-columns: max-content min-content;
grid-template-areas: "vehicle-icon vehicle-type";
padding-bottom: 0.5em;
}
.vehicle-icon {
grid-area: vehicle-icon;
padding-right: 1em;
}
.vehicle-type {
grid-area: vehicle-type;
text-align: center;
align-self: center;
}
.load-size {
grid-area: load-size;
justify-self: center;
text-align: center;
padding-top: 0.5em;
}
img {
max-width: 4em;
}
.other-details {
grid-area: other-details;
display: grid;
grid-template-rows: 1fr min-content 1fr;
width: 100%;
justify-items: center;
align-items: center;
}
.gray-line {
width: 100%;
background-color: #ccc;
height: 1px;
border: 0px solid #545454;
}
}
#media only screen and (max-width: 1023px) {
nb-card-header {
border-bottom: none;
text-align: right;
padding: 0 1.25rem;
padding-top: 1rem;
}
.h1-card {
font-family: Open Sans, sans-serif;
font-weight: 550;
font-size: 115%;
color: #373737;
}
.h2-card {
font-family: Open Sans, sans-serif;
font-size: 105%;
font-weight: 550;
color: #373737;
}
.h3-card {
font-family: Open Sans, sans-serif;
font-size: 90%;
color: #545454;
}
.h4-card {
font-family: Open Sans, sans-serif;
font-size: 90%;
color: #373737;
}
.card-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "location misc-details";
margin: 0%;
padding: 0%;
}
.location {
grid-area: location;
display: grid;
grid-template-columns: min-content 1fr;
grid-template-areas: "seperator from-to";
}
.from-to {
grid-area: from-to;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-areas: "location-1"
"location-2";
}
.location-1 {
padding-left: 10px;
padding-right: 15px;
grid-area: location-1;
align-self: top;
justify-self: left;
text-align: left;
}
.location-2 {
padding-left: 10px;
padding-right: 15px;
grid-area: location-2;
align-self: flex-end;
justify-self: left;
text-align: left;
}
.loc {
margin-bottom: 0px;
}
.seperator {
grid-area: seperator;
align-items: center;
display: grid;
grid-template-rows: min-content 1fr min-content;
grid-template-areas: "dot-start"
"line"
"dot-end";
}
.line {
width: 1px;
background-color: #ccc;
height: 100%;
border: 0px solid black;
justify-self: center;
}
.dot-start {
grid-area: dot-start;
justify-self: center;
align-self: center;
}
.dot-end {
grid-area: dot-end;
justify-self: center;
align-self: center;
margin-bottom: 2.65em;
}
.misc-details {
grid-area: misc-details;
display: grid;
justify-self: right;
grid-template-columns: 1fr;
grid-template-rows: 1fr max-content 1fr;
grid-template-areas: "vehicle-type"
"seperator-2"
"other-details";
}
.vehicle-load {
grid-area: vehicle-type;
display: grid;
width: 100%;
grid-template-columns: max-content;
grid-template-areas: "vehicle"
"load-size";
}
.vehicle {
grid-area: vehicle;
display: grid;
justify-self: center;
grid-template-columns: max-content min-content;
grid-template-areas: "vehicle-icon vehicle-type";
padding-bottom: 0.5em;
}
.vehicle-icon {
grid-area: vehicle-icon;
padding-right: 1em;
}
.vehicle-type {
grid-area: vehicle-type;
text-align: center;
align-self: center;
}
.load-size {
grid-area: load-size;
justify-self: center;
text-align: center;
padding-top: 0.5em;
}
img {
max-width: 8em;
}
.other-details {
grid-area: other-details;
display: grid;
grid-template-rows: 1fr min-content 1fr;
width: 100%;
justify-items: center;
align-items: center;
}
.gray-line {
width: 100%;
background-color: #ccc;
height: 1px;
border: 0px solid #545454;
}
}
#media only screen and (min-width: 1024px) {
nb-card-header {
border-bottom: none;
text-align: right;
padding: 0 1.25rem;
padding-top: 1rem;
}
.h1-card {
font-family: Open Sans, sans-serif;
font-weight: 550;
font-size: 115%;
color: #373737;
}
.h2-card {
font-family: Open Sans, sans-serif;
font-size: 105%;
font-weight: 550;
color: #373737;
}
.h3-card {
font-family: Open Sans, sans-serif;
font-size: 90%;
color: #545454;
}
.h4-card {
font-family: Open Sans, sans-serif;
font-size: 90%;
color: #373737;
}
.card-container {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-areas: "location location location location vehicle-type vehicle-type vehicle-type vehicle-type other-details other-details";
}
.location {
grid-area: location;
display: grid;
grid-template-columns: max-content 1fr max-content;
grid-template-areas: "location-1 seperator location-2";
}
.location-1 {
padding-left: 10px;
padding-right: 15px;
grid-area: location-1;
align-self: center;
justify-self: left;
text-align: left;
}
.location-2 {
padding-left: 15px;
padding-right: 10px;
grid-area: location-2;
align-self: center;
justify-self: right;
text-align: right;
}
.loc {
margin-bottom: 0px;
}
.seperator {
grid-area: seperator;
align-items: center;
display: grid;
grid-template-columns: min-content 1fr min-content;
grid-template-areas: "dot-start line dot-end";
}
hr.line {
width: 100%;
background-color: #ccc;
height: 1px;
border: 0px solid black;
}
.dot-start {
grid-area: dot-start;
justify-self: center;
}
.dot-end {
grid-area: dot-end;
grid-row: 1/2;
justify-self: center;
}
.vehicle-load {
grid-area: vehicle-type;
display: grid;
align-items: center;
justify-self: center;
justify-items: center;
grid-template-columns: max-content;
grid-template-areas: "vehicle"
"load-size";
}
.vehicle {
grid-area: vehicle;
display: grid;
grid-template-columns: max-content min-content;
grid-template-areas: "vehicle-icon vehicle-type";
padding-bottom: 0.5em;
}
.vehicle-icon {
grid-area: vehicle-icon;
padding-right: 1em;
}
.vehicle-type {
grid-area: vehicle-type;
padding-left: 1em;
text-align: center;
align-self: center;
}
.load-size {
grid-area: load-size;
text-align: center;
padding-top: 0.5em;
}
img {
max-width: 8em;
}
.other-details {
grid-area: other-details;
display: grid;
grid-template-rows: 1fr min-content 1fr;
justify-items: center;
align-items: center;
}
.gray-line {
width: 60%;
background-color: #ccc;
height: 1px;
border: 0px solid #545454;
}
}
<div class="card-container">
<div class="location">
<div class="from-to overflow">
<div class="location-1 ellipsis">
<div class="loc ellipsis">
<span class="h1-card">Thiruvananthapuram City</span><br>
<span class="h3-card">Thiruvananthapuram
<br>Kerala</span>
</div>
</div>
<div class="location-2">
<p class="loc ellipsis">
<span class="h1-card">Venkatanarasimharajuvaripeta</span><br>
<span class="h3-card">Chitoor
<br>Andhra Pradesh</span>
</p>
</div>
</div>
<div class="seperator">
<svg height="1.2em" width="1.2em" class="dot-start">
<circle cx="0.6em" cy="0.74em" r="0.4em" stroke="black" stroke-width="0.06em" fill="lightgreen" />
</svg>
<div class="line"></div>
<svg height="1.2em" width="1.2em" class="dot-end">
<circle cx="0.6em" cy="0.5em" r="0.4em" stroke="red" stroke-width="0.12em" fill="white" />
</svg>
</div>
</div>
<div class="misc-details">
<div class="vehicle-load">
<div class="vehicle">
<div class="vehicle-icon"> ICON ICON ICON </div>
<div class="vehicle-type"><span class="h2-card">Trailer</span><br>
<span class="h4-card">Load</span></div>
</div>
<div class="h2-card load-size">40' x 10' x 8' | 20 Tons</div>
</div>
<hr class="gray-line" />
<div class="other-details">
<div class="load-type h2-card">ODC Cargo</div>
<hr class="gray-line" />
<div class="loading-date h2-card">Tue | 22 Sep</div>
</div>
</div>
</div>
Add max-width:100% to avoid the overflow and min-width:0 to allow the shrink of the items:
.ellipsis {
...
min-width: 0;
max-width: 100%;
}
Make sure to add the class to location-1 and location-2
Full code
* {
box-sizing: border-box;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
max-width: 100%;
}
.overflow {
overflow: hidden;
}
#media only screen and (max-width: 480px) {
nb-card-header {
border-bottom: none;
text-align: right;
padding: 0 1.25rem;
padding-top: 1rem;
}
.h1-card {
font-family: Open Sans, sans-serif;
font-weight: 550;
font-size: 80%;
color: #373737;
}
.h2-card {
font-family: Open Sans, sans-serif;
font-size: 75%;
font-weight: 550;
color: #373737;
}
.h3-card {
font-family: Open Sans, sans-serif;
font-size: 70%;
color: #545454;
}
.h4-card {
font-family: Open Sans, sans-serif;
font-size: 70%;
color: #373737;
}
.card-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "location misc-details";
margin: 0%;
padding: 0%;
}
.location {
grid-area: location;
display: grid;
grid-template-columns: min-content 1fr;
grid-template-areas: "seperator from-to";
}
.from-to {
grid-area: from-to;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-areas: "location-1" "location-2"
}
.location-1 {
padding-left: 10px;
padding-right: 15px;
grid-area: location-1;
align-self: top;
justify-self: left;
text-align: left;
}
.location-2 {
padding-left: 10px;
padding-right: 15px;
grid-area: location-2;
align-self: flex-end;
justify-self: left;
text-align: left;
}
.loc {
margin-bottom: 0px;
}
.seperator {
grid-area: seperator;
align-items: center;
display: grid;
grid-template-rows: min-content 1fr min-content;
grid-template-areas: "dot-start" "line" "dot-end";
}
.line {
width: 1px;
background-color: #ccc;
height: 100%;
border: 0px solid black;
justify-self: center;
}
.dot-start {
grid-area: dot-start;
justify-self: center;
align-self: center;
}
.dot-end {
grid-area: dot-end;
justify-self: center;
align-self: center;
margin-bottom: 2.65em;
}
.misc-details {
grid-area: misc-details;
display: grid;
justify-self: right;
grid-template-rows: 1fr max-content 1fr;
grid-template-areas: "vehicle-type" "seperator-2" "other-details";
}
.vehicle-load {
grid-area: vehicle-type;
display: grid;
width: 100%;
grid-template-columns: max-content;
grid-template-areas: "vehicle" "load-size";
}
.vehicle {
grid-area: vehicle;
display: grid;
justify-self: center;
grid-template-columns: max-content min-content;
grid-template-areas: "vehicle-icon vehicle-type";
padding-bottom: 0.5em;
}
.vehicle-icon {
grid-area: vehicle-icon;
padding-right: 1em;
}
.vehicle-type {
grid-area: vehicle-type;
text-align: center;
align-self: center;
}
.load-size {
grid-area: load-size;
justify-self: center;
text-align: center;
padding-top: 0.5em;
}
img {
max-width: 4em;
}
.other-details {
grid-area: other-details;
display: grid;
grid-template-rows: 1fr min-content 1fr;
width: 100%;
justify-items: center;
align-items: center;
}
.gray-line {
width: 100%;
background-color: #ccc;
height: 1px;
border: 0px solid #545454;
}
}
#media only screen and (max-width: 1023px) {
nb-card-header {
border-bottom: none;
text-align: right;
padding: 0 1.25rem;
padding-top: 1rem;
}
.h1-card {
font-family: Open Sans, sans-serif;
font-weight: 550;
font-size: 115%;
color: #373737;
}
.h2-card {
font-family: Open Sans, sans-serif;
font-size: 105%;
font-weight: 550;
color: #373737;
}
.h3-card {
font-family: Open Sans, sans-serif;
font-size: 90%;
color: #545454;
}
.h4-card {
font-family: Open Sans, sans-serif;
font-size: 90%;
color: #373737;
}
.card-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "location misc-details";
margin: 0%;
padding: 0%;
}
.location {
grid-area: location;
display: grid;
grid-template-columns: min-content 1fr;
grid-template-areas: "seperator from-to";
}
.from-to {
grid-area: from-to;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-areas: "location-1" "location-2";
}
.location-1 {
padding-left: 10px;
padding-right: 15px;
grid-area: location-1;
align-self: top;
justify-self: left;
text-align: left;
}
.location-2 {
padding-left: 10px;
padding-right: 15px;
grid-area: location-2;
align-self: flex-end;
justify-self: left;
text-align: left;
}
.loc {
margin-bottom: 0px;
}
.seperator {
grid-area: seperator;
align-items: center;
display: grid;
grid-template-rows: min-content 1fr min-content;
grid-template-areas: "dot-start" "line" "dot-end";
}
.line {
width: 1px;
background-color: #ccc;
height: 100%;
border: 0px solid black;
justify-self: center;
}
.dot-start {
grid-area: dot-start;
justify-self: center;
align-self: center;
}
.dot-end {
grid-area: dot-end;
justify-self: center;
align-self: center;
margin-bottom: 2.65em;
}
.misc-details {
grid-area: misc-details;
display: grid;
justify-self: right;
grid-template-columns: 1fr;
grid-template-rows: 1fr max-content 1fr;
grid-template-areas: "vehicle-type" "seperator-2" "other-details";
}
.vehicle-load {
grid-area: vehicle-type;
display: grid;
width: 100%;
grid-template-columns: max-content;
grid-template-areas: "vehicle" "load-size";
}
.vehicle {
grid-area: vehicle;
display: grid;
justify-self: center;
grid-template-columns: max-content min-content;
grid-template-areas: "vehicle-icon vehicle-type";
padding-bottom: 0.5em;
}
.vehicle-icon {
grid-area: vehicle-icon;
padding-right: 1em;
}
.vehicle-type {
grid-area: vehicle-type;
text-align: center;
align-self: center;
}
.load-size {
grid-area: load-size;
justify-self: center;
text-align: center;
padding-top: 0.5em;
}
img {
max-width: 8em;
}
.other-details {
grid-area: other-details;
display: grid;
grid-template-rows: 1fr min-content 1fr;
width: 100%;
justify-items: center;
align-items: center;
}
.gray-line {
width: 100%;
background-color: #ccc;
height: 1px;
border: 0px solid #545454;
}
}
#media only screen and (min-width: 1024px) {
nb-card-header {
border-bottom: none;
text-align: right;
padding: 0 1.25rem;
padding-top: 1rem;
}
.h1-card {
font-family: Open Sans, sans-serif;
font-weight: 550;
font-size: 115%;
color: #373737;
}
.h2-card {
font-family: Open Sans, sans-serif;
font-size: 105%;
font-weight: 550;
color: #373737;
}
.h3-card {
font-family: Open Sans, sans-serif;
font-size: 90%;
color: #545454;
}
.h4-card {
font-family: Open Sans, sans-serif;
font-size: 90%;
color: #373737;
}
.card-container {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-areas: "location location location location vehicle-type vehicle-type vehicle-type vehicle-type other-details other-details";
}
.location {
grid-area: location;
display: grid;
grid-template-columns: max-content 1fr max-content;
grid-template-areas: "location-1 seperator location-2";
}
.location-1 {
padding-left: 10px;
padding-right: 15px;
grid-area: location-1;
align-self: center;
justify-self: left;
text-align: left;
}
.location-2 {
padding-left: 15px;
padding-right: 10px;
grid-area: location-2;
align-self: center;
justify-self: right;
text-align: right;
}
.loc {
margin-bottom: 0px;
}
.seperator {
grid-area: seperator;
align-items: center;
display: grid;
grid-template-columns: min-content 1fr min-content;
grid-template-areas: "dot-start line dot-end";
}
hr.line {
width: 100%;
background-color: #ccc;
height: 1px;
border: 0px solid black;
}
.dot-start {
grid-area: dot-start;
justify-self: center;
}
.dot-end {
grid-area: dot-end;
grid-row: 1/2;
justify-self: center;
}
.vehicle-load {
grid-area: vehicle-type;
display: grid;
align-items: center;
justify-self: center;
justify-items: center;
grid-template-columns: max-content;
grid-template-areas: "vehicle" "load-size";
}
.vehicle {
grid-area: vehicle;
display: grid;
grid-template-columns: max-content min-content;
grid-template-areas: "vehicle-icon vehicle-type";
padding-bottom: 0.5em;
}
.vehicle-icon {
grid-area: vehicle-icon;
padding-right: 1em;
}
.vehicle-type {
grid-area: vehicle-type;
padding-left: 1em;
text-align: center;
align-self: center;
}
.load-size {
grid-area: load-size;
text-align: center;
padding-top: 0.5em;
}
img {
max-width: 8em;
}
.other-details {
grid-area: other-details;
display: grid;
grid-template-rows: 1fr min-content 1fr;
justify-items: center;
align-items: center;
}
.gray-line {
width: 60%;
background-color: #ccc;
height: 1px;
border: 0px solid #545454;
}
}
<div class="card-container">
<div class="location">
<div class="from-to overflow">
<div class="location-1 ellipsis">
<div class="loc ellipsis">
<span class="h1-card">Thiruvananthapuram City</span><br>
<span class="h3-card">Thiruvananthapuram
<br>Kerala</span>
</div>
</div>
<div class="location-2 ellipsis">
<p class="loc ellipsis">
<span class="h1-card">Venkatanarasimharajuvaripeta</span><br>
<span class="h3-card">Chitoor
<br>Andhra Pradesh</span>
</p>
</div>
</div>
<div class="seperator">
<svg height="1.2em" width="1.2em" class="dot-start">
<circle cx="0.6em" cy="0.74em" r="0.4em" stroke="black" stroke-width="0.06em" fill="lightgreen" />
</svg>
<div class="line"></div>
<svg height="1.2em" width="1.2em" class="dot-end">
<circle cx="0.6em" cy="0.5em" r="0.4em" stroke="red" stroke-width="0.12em" fill="white" />
</svg>
</div>
</div>
<div class="misc-details">
<div class="vehicle-load">
<div class="vehicle">
<div class="vehicle-icon"> ICON ICON ICON </div>
<div class="vehicle-type"><span class="h2-card">Trailer</span><br>
<span class="h4-card">Load</span></div>
</div>
<div class="h2-card load-size">40' x 10' x 8' | 20 Tons</div>
</div>
<hr class="gray-line" />
<div class="other-details">
<div class="load-type h2-card">ODC Cargo</div>
<hr class="gray-line" />
<div class="loading-date h2-card">Tue | 22 Sep</div>
</div>
</div>
</div>
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;
}
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>