I'm pretty new to grid but I would like to know why this isn't working? (The feed needs to be below the feed input)
I have tried all I know, but it always ends up being at the bottom or on the right. As I said before, I'm new to grid and I would love some help :)
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: rgb(230, 230, 230);
}
#content {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
width: 800px;
margin-left: 20%;
margin-right: 20%;
margin-top: 5%;
padding: 20px;
}
#userdisplay {
grid-area: 2 / 2 / 3 / 3;
width: 350px;
height: 500px;
background-color: white;
border-radius: 10px;
}
#feed-input {
grid-area: 2 / 3 / 3 / 4;
width: 700px;
height: 100px;
background-color: white;
border-radius: 10px;
}
#feed {
grid-area: 3 / 3 / 4 / 4;
width: 700px;
height: 100px;
background-color: white;
border-radius: 10px;
}
<div id="content">
<div id="userdisplay"></div>
<div id="feed-input"></div>
<div id="feed"></div>
</div>
this is the template
.item {grid-column: <start-line> / <end-line> | <start-line> / span <value>; grid-row: <start-line> / <end-line> | <start-line> / span <value>; }
Related
The following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TITLE</title>
<style>
.a-block {
background-color: #000066;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
padding: 10px;
gap:10px;
}
.a-block > div {
background-color: #FF0000;
border: 1px solid rgba(255, 255, 255, 0.8);
padding: 50px;
gap: 10px;
}
.c_title {
display:grid;
grid-area: 1 / 1 / 2 / 2
font-size: 2em;
text-align: left;
background-color: #FF0000;
gap: 10px;
}
.c_body {
display:grid;
grid-area: 2 / 1 / 3 / 2
font-size: 1.5em;
text-align: justify;
font-size: calc(1.5em + (1vw - 0.5em)); /* adapt font-size based on screen size */
min-font-size: 0.8em; /* minimum font-size */
background-color: #0000FF;
gap: 10px;
}
.p_img {
display:grid;
grid-area: 1 / 2 / 3 / 3
background-color: #FF0000;
gap: 10px;
}
.p_img > img {
object-fit: cover;
width: 100%;
max-height: 100%;
}
}
</style>
</head>
<body>
<div class="a-block" >
<div class="c_title">title</div>
<div class="c_body">
Lorem ipsum dolor sit
</div>
<div class="p_img" >
<img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" >
</div>
</div>
<p></p>
</body>
</html>
Yields this result
Rendered result in browser
Both divs I expect to be stacked over each other in the first column are on the first line.
The image I expect to be in the second column and spawning both rows is the second row and first line
Looking at Chrome's inspector I can see my grid layout information is somehow ignored, but I did not find how to fix it
Chrome inspector view
I tried many variations on grid layout and properties, but it keeps being ignored.
.a-block {
background-color: #000066;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
padding: 10px;
gap:10px;
}
.a-block > div {
background-color: #FF0000;
border: 1px solid rgba(255, 255, 255, 0.8);
padding: 50px;
gap: 10px;
}
.c_title {
font-size: 2em;
text-align: left;
background-color: #FF0000;
gap: 10px;
}
.c_body {
font-size: 1.5em;
text-align: justify;
font-size: calc(1.5em + (1vw - 0.5em)); /* adapt font-size based on screen size */
min-font-size: 0.8em; /* minimum font-size */
background-color: #0000FF;
gap: 10px;
}
.p_img {
grid-area: 1 / 2 / span 2 / 2;
background-color: #FF0000;
gap: 10px;
}
.p_img > img {
object-fit: cover;
width: 100%;
max-height: 100%;
}
<div class="a-block" >
<div class="c_title">title</div>
<div class="c_body">
Lorem ipsum dolor sit
</div>
<div class="p_img" >
<img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" >
</div>
</div>
I have started using Grid CSS and i am stuck in building a Layout using Grid system.
I am looking to build a layout where the column would overlap a row and take full height. I have attached a screenshot of the layout and what i have tried so far.
body {
margin: 40px;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 120px 120px 120px;
grid-template-areas:
"header header header"
"sidebar content content";
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.header {
background-color: #999;
}
.overlay {
background-color: red;
z-index: 10;
grid-column: content-start / content-end;
grid-row: header-start / content-end;
}
<div class="wrapper">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="overlay">Content</div>
</div>
Depending on how you want to overlap the following code works, but need to be adapted:
There's a lot of other way to do this...
body {
margin: 40px;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 120px 120px 120px;
grid-template-rows: 30px 30px auto auto;
grid-template-areas:
"header header header"
"sidebar content content";
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.header {
background-color: #999;
grid-row: 1 / 3;
}
.sidebar {
background-color: red;
z-index: 10;
grid-row: 2 / 4;
height: 300px;
}
.overlay {
background-color: red;
z-index: 10;
grid-column: content-start / content-end;
grid-row: 3 / 4;
}
<div class="wrapper">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="overlay">Content</div>
</div>
I can't align a div container at the bottom of an image.
What I've tried is editing the attribute position of the image and set it's value to "relative".
Explaining this is a little bit difficult, but I got html and css code snippets with a little preview:
codepen.io/Proudyy/pen/PoOjYpK
(it's not 84 lines long, so not too much in my opinion)
This is how it should look like:
https://imgur.com/a/LShx2cM
set position: absolute for .skin-item-footer and position: relative on it's parent div. Check below code
.skin-item-splashart {
width: 100%;
border-radius: 12px;
position: relative;
}
.skin-item-footer-left-container {
grid-column: 1;
display: grid;
grid-template-rows: repeat(2, auto);
align-self: start;
height: 100%;
}
.skin-item-footer-right-container {
grid-column: 2;
display: grid;
align-items: center;
justify-content: end;
align-self: end;
height: 100%;
}
.skin-item-default-name {
font-size: 24px;
font-weight: bold;
margin-left: 3vh;
}
.skin-item-name {
font-size: 18px;
color: gainsboro;
margin: 0;
margin-left: 3vh;
grid-row: 1;
}
.skin-item-cost {
display: grid;
grid-row: 2;
grid-template-columns: repeat(2, auto);
grid-template-rows: 1fr;
}
.skin-item-cost-value {
color: gainsboro;
grid-column: 1;
margin: 0;
}
.skin-item-cost-icon {
grid-column: 2;
margin: 0;
}
.skin-item-save-icon {
cursor: pointer;
margin-right: 2vh;
}
.skin-item {
background-color: rgb(0, 40, 75);
margin: 15px;
border-radius: 12px;
height: auto;
width: 50%;
position: relative;
}
img{
max-width: 100%;
}
.skin-item-footer {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 0 0 12px 12px;
position: absolute;
bottom: 0;
height: auto;
width: 100%;
}
<div class="skin-item">
<img class="skin-item-splashart" src="https://cdn.communitydragon.org/latest/champion/1/splash-art/skin/1"/>
<div class="skin-item-footer">
<div class="skin-item-footer-left-container">
<p class="skin-item-name">SkinName</p>
<div class="skin-item-cost">
<img class="skin-item-cost-icon" src="https://raw.communitydragon.org/latest/plugins/rcp-fe-lol-static-assets/global/default/images/icon-rp-24.png"/>
<p class="skin-item-cost-value">Spaceholder</p>
</div>
</div>
<div class="skin-item-footer-right-container">
<img class="skin-item-save-icon" src="https://img.icons8.com/color/32/000000/save--v1.png"/>
</div>
</div>
</div>
I tried stopping the column overflow with max-height, max-width, but it doesn't seem to work.
I've made three columns with CSS Grid. One for the nav section, one for the left column and one for the right column. the left column section keeps overflowing over the nav section and the right column section as shown in the screenshots.
What I'm trying to achieve:
What happens:
#import url("https://fonts.googleapis.com/css2?family=Asap:wght#400;700&display=swap");
* {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: #4a6163;
font-family: "Asap";
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.main_grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 0.25fr (1fr)[2];
grid-template-columns: 0.25fr repeat(2, 1fr);
-ms-grid-rows: 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
max-height: 100%;
max-width: 100%;
}
.nav_section {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 1;
grid-area: 1 / 1 / 1 / 2;
border: 3px yellow solid;
}
.left_column {
-ms-grid-row: 1;
-ms-grid-column: 2;
-ms-grid-column-span: 1;
grid-area: 1 / 2 / 1 / 3;
border: 1px yellow solid;
}
.right_colomn {
-ms-grid-row: 1;
-ms-grid-column: 3;
-ms-grid-column-span: 1;
grid-area: 1 / 3 / 1 / 4;
border: 2px blue solid;
}
.left_column > h1 {
font-family: "Asap";
color: #f9faf4;
font-size: 13rem;
font-style: normal;
font-weight: normal;
line-height: 15.75rem;
text-transform: uppercase;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border: red 3px solid;
-o-object-fit: contain;
object-fit: contain;
max-width: 100%;
max-height: 100%;
}
.main_bio {
color: #f2c4ce;
font-size: 1.75rem;
text-decoration: underline;
}
<main>
<div class="main_grid">
<div class="nav_section">
<nav class="main_nav">
home
work
contact
</nav>
</div>
<div class="left_column">
<h1 class="main_title">Hello, I'm Jack</h1>
</div>
<div class="right_colomn">
<p class="main_bio">A 20 YEAR OLD FROM A SMALL TOWN NEAR AMSTERDAM. CURRENTLY STUDYING COMPUTER SCIENCE IN LEIDEN.</p>
</div>
</div>
</main>
To avoid overflowing, you can use the rule white-space: nowrap; for your h1.
However, that will avoid breaking the line after "Hello," as well.
So I would also recommend adding a <br /> after the Hello, for explicitly breaking that line.
That should solve your line-break issues, but I noticed you're also rotating the text by 90deg, and that can mess up the heading fitting inside the cell.
So I recommend adding the rule writing-mode: tb-rl (link) to make the text be written vertically, and then rotating it 180deg instead of 90 (so it becomes bottom-up instead of top-down)
This is your snippet with the suggested changes
#import url("https://fonts.googleapis.com/css2?family=Asap:wght#400;700&display=swap");
* {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: #4a6163;
font-family: "Asap";
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.main_grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 0.25fr (1fr)[2];
grid-template-columns: 0.25fr repeat(2, 1fr);
-ms-grid-rows: 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
max-height: 100%;
max-width: 100%;
}
.nav_section {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 1;
grid-area: 1 / 1 / 1 / 2;
border: 3px yellow solid;
}
.left_column {
-ms-grid-row: 1;
-ms-grid-column: 2;
-ms-grid-column-span: 1;
grid-area: 1 / 2 / 1 / 3;
border: 1px yellow solid;
}
.right_colomn {
-ms-grid-row: 1;
-ms-grid-column: 3;
-ms-grid-column-span: 1;
grid-area: 1 / 3 / 1 / 4;
border: 2px blue solid;
}
.left_column > h1 {
font-family: "Asap";
color: #f9faf4;
font-size: 13rem;
font-style: normal;
font-weight: normal;
line-height: 15.75rem;
text-transform: uppercase;
/* Updated the following 3 lines */
white-space: nowrap;
writing-mode: tb-rl;
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border: red 3px solid;
-o-object-fit: contain;
object-fit: contain;
max-width: 100%;
max-height: 100%;
}
.main_bio {
color: #f2c4ce;
font-size: 1.75rem;
text-decoration: underline;
}
<main>
<div class="main_grid">
<div class="nav_section">
<nav class="main_nav">
home
work
contact
</nav>
</div>
<div class="left_column">
<h1 class="main_title">Hello,<br/>I'm Jack</h1>
</div>
<div class="right_colomn">
<p class="main_bio">A 20 YEAR OLD FROM A SMALL TOWN NEAR AMSTERDAM. CURRENTLY STUDYING COMPUTER SCIENCE IN LEIDEN.</p>
</div>
</div>
</main>
I have a css grid:
|-------|-------------------|
|-------| |
| | overflow |
|-------|-------------------|
|-------|-------------------|
And I cannot stop the "overflow" from growing, basically it always expands, despite having set:
overflow: auto;
in the css. How can achieve this?
The snippet below.
html {
font-size: 22px;
}
body {
padding: 1rem;
/* grid-template-columns: 1fr 3fr; */
}
.wrapper {
max-height: 70vh;
padding: 1rem;
}
.header {
background-color: red;
color: white;
padding: 1rem;
height: 2rem;
resize: horizontal;
grid-area: 1 / 1 / 2 / 2;
}
.nav {
background-color: lightgrey;
color: baclk;
padding: 1rem;
height: 4rem;
overflow: auto;
min-width: 12rem;
resize: horizontal;
grid-area: 2 / 1 / 3 / 2;
}
.scroll {
background-color: dodgerblue;
color: white;
padding: 1rem;
overflow: auto;
grid-area: 1 / 2 / 3 / 3;
}
.prev {
background-color: black;
color: white;
padding: 1rem;
height: 4rem;
grid: 3 / 1 / 4 / 2;
}
.select {
background-color: lightgrey;
color: white;
padding: 1rem;
height: 4rem;
grid-area: 4 2 4 4;
}
.cards {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-gap: 0.5rem;
}
/* Screen larger than 600px? 2 column */
#media (min-width: 600px) {
.cards {
grid-template-columns: 1fr 3fr;
}
}
<div class="wrapper">
<div class="cards">
<div class="header">HEADER</div>
<div class="scroll">
<p>111</p>
<p>222</p>
<p>333</p>
<p>444</p>
<p>555</p>
<!-- <p>666</p>
<p>777</p>
<p>888</p>
<p>999</p> -->
</div>
<div class="nav">NAV</div>
<div class="prev">PREVIEW</div>
<div class="select">SELECT</div>
</div>
</div>
It turned out the solution is to add one line to the grid definition:
grid-template-rows: auto 1fr auto;
This produces a nice layout, when the "scroll" area overflows, while the grid scales as expected. Updated snippet below.
html {
font-size: 22px;
}
body {
padding: 1rem;
overflow: hidden;
/* grid-template-columns: 1fr 3fr; */
}
.header {
background-color: red;
color: white;
padding: 1rem;
height: 2rem;
grid-area: 1 / 1 / 2 / 2;
}
.nav {
background-color: lightgrey;
color: baclk;
padding: 1rem;
height: auto;
overflow: auto;
min-width: 12rem;
resize: horizontal;
grid-area: 2 / 1 / 3 / 2;
}
.scroll {
background-color: dodgerblue;
color: white;
padding: 1rem;
overflow: auto;
max-height: 70vh;
grid-area: 1 / 2 / 3 / 3;
}
.prev {
background-color: black;
color: white;
padding: 1rem;
max-height: 30vh;
grid: 3 / 1 / 4 / 2;
}
.select {
background-color: lightgrey;
color: white;
padding: 1rem;
height: 4rem;
grid-area: 4 2 4 4;
}
.cards {
max-width: 80vw;
height: 90vh;
margin: 0 auto;
display: grid;
grid-gap: 0.5rem;
}
/* Screen larger than 600px? 2 column */
#media (min-width: 600px) {
.cards {
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr auto;
}
}
<div class="wrapper">
<div class="cards">
<div class="header">HEADER</div>
<div class="scroll">
<p>111</p>
<p>222</p>
<p>333</p>
<p>444</p>
<p>555</p>
<p>666</p>
<p>777</p>
<!-- <p>888</p>
<p>999</p> -->
</div>
<div class="nav">NAV</div>
<div class="prev">PREVIEW</div>
<div class="select">SELECT</div>
</div>
</div>