I'm trying to make an element stick to the bottom of the parent div even when there is nothing above it.
As you can see in these two pictures, the element I'm talking about is the div that contains the textarea.
When there are enough messages in the div above the textarea, it sticks to the bottom of the page just fine, however when there aren't that many elements, it doesn't, even though I've set bottom: 0px;.
Here's a part of the code:
* {
padding: 0px;
margin: 0px;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 0.8fr 4fr 15fr;
grid-template-rows: 50px calc(100vh - 65px);
overflow-y: hidden;
}
.navbar {
grid-column: 1/4;
background: #223;
}
.main-panel {
display: none;
grid-row: 2/3;
background: #223;
}
.buttons {
grid-column: 1/2;
grid-row: 2/3;
background: #456;
}
.screen {
grid-column: 3/4;
grid-row: 2/3;
background: #223;
}
.left-panel {
grid-column: 2/3;
grid-row: 2/3;
background: #243;
}
/*css for the chat box*/
.messages {
padding: 5px;
padding-right: 35px;
}
.message {
border: 2px solid #dedede;
background-color: #f1f1f1;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
}
.sender {
font-size: 0.8em;
}
.message-mine {
border: 2px solid #dedede;
background-color: #321;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
}
.my-messages {
padding: 5px;
padding-left: 35px;
}
.chat-box {
height: 100%;
overflow-y: scroll;
}
.chat-sending-area {
display: grid;
grid-template-rows: 100%;
grid-template-columns: 4fr 1fr;
border: 5px solid black;
background: gray;
position: sticky;
margin-bottom: 0px;
bottom: 0px;
z-index: 1000;
width: calc(100% - 10px);
height: 6%;
}
.chat-history {
}
.text-area {
grid-row:1/2;
grid-column: 1/2;
width: 95%;
height: calc(100% - 3px);
resize: none;
}
.send-button {
grid-row:1/2;
grid-column: 2/3;
}
.send-message-button {
width: 85%;
height: calc(100% - 6px);
border: 3px outset pink;
background: green;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="navbar">
STUFF HERE.
</div>
<div class="main-panel">
STUFF HERE.
</div>
<div class="buttons">
STUFF HERE.
</div>
<div class="screen">
STUFF HERE.
</div>
<div class="left-panel">
<div class="chat-box">
<div class="chat-history">
<div class="my-messages">
<div class="message-mine" id="message1">
<span class="sender">
me:
</span><br>
<span class="content">
testing...
</span>
</div>
</div>
<div class="my-messages">
<div class="message-mine" id="message1">
<span class="sender">
me:
</span><br>
<span class="content">
testing...
</span>
</div>
</div>
<div class="messages">
<!-- -->
<div class="message" id="message1">
<span class="sender">
me:
</span><br>
<span class="content">
testing...
</span>
</div>
</div>
<div class="messages">
<!-- -->
<div class="message" id="message1">
<span class="sender">
me:
</span><br>
<span class="content">
testing...
</span>
</div>
</div>
</div>
<div class="chat-sending-area">
<div class="send-button">
<img class="send-message-button" src="chat-dots.svg">
</div>
<div class="text-box">
<textarea class="text-area">Write your message here...</textarea>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I would like the (chat-sending-area) div to stick to the bottom of the (chat-box) div no matter what.
Any help would be much appreciated.
You can add display: flex and flex-direction: column to .chat-box then add margin-top: auto to .chat-sending-area to solve your problem.
* {
padding: 0px;
margin: 0px;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 0.8fr 4fr 15fr;
grid-template-rows: 50px calc(100vh - 65px);
overflow-y: hidden;
}
.navbar {
grid-column: 1/4;
background: #223;
}
.main-panel {
display: none;
grid-row: 2/3;
background: #223;
}
.screen {
grid-column: 3/4;
grid-row: 2/3;
background: #223;
}
.left-panel {
grid-column: 2/3;
grid-row: 2/3;
background: #243;
}
/*css for the chat box*/
.messages {
padding: 5px;
padding-right: 35px;
}
.message {
border: 2px solid #dedede;
background-color: #f1f1f1;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
}
.sender {
font-size: 0.8em;
}
.message-mine {
border: 2px solid #dedede;
background-color: #321;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
}
.my-messages {
padding: 5px;
padding-left: 35px;
}
.chat-box {
display: flex;
flex-direction: column;
height: 100%;
overflow-y: scroll;
}
.chat-sending-area {
display: grid;
grid-template-rows: 100%;
grid-template-columns: 4fr 1fr;
border: 5px solid black;
background: gray;
position: sticky;
margin-bottom: 0px;
margin-top: auto;
bottom: 0px;
z-index: 1000;
width: calc(100% - 10px);
height: 6%;
}
.chat-history {}
.text-area {
grid-row: 1/2;
grid-column: 1/2;
width: 95%;
height: calc(100% - 3px);
resize: none;
}
.send-button {
grid-row: 1/2;
grid-column: 2/3;
}
.send-message-button {
width: 85%;
height: calc(100% - 6px);
border: 3px outset pink;
background: green;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="navbar">
STUFF HERE.
</div>
<div class="main-panel">
STUFF HERE.
</div>
<div class="buttons">
STUFF HERE.
</div>
<div class="screen">
STUFF HERE.
</div>
<div class="left-panel">
<div class="chat-box">
<div class="chat-history">
<div class="my-messages">
<div class="message-mine" id="message1">
<span class="sender">
me:
</span><br>
<span class="content">
testing...
</span>
</div>
</div>
<div class="my-messages">
<div class="message-mine" id="message1">
<span class="sender">
me:
</span><br>
<span class="content">
testing...
</span>
</div>
</div>
<div class="messages">
<!-- -->
<div class="message" id="message1">
<span class="sender">
me:
</span><br>
<span class="content">
testing...
</span>
</div>
</div>
<div class="messages">
<!-- -->
<div class="message" id="message1">
<span class="sender">
me:
</span><br>
<span class="content">
testing...
</span>
</div>
</div>
</div>
<div class="chat-sending-area">
<div class="send-button">
<img class="send-message-button" src="chat-dots.svg">
</div>
<div class="text-box">
<textarea class="text-area">Write your message here...</textarea>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I am trying to create a table that looks like this
<div class="style" id="1"></div>
<div class="style" id="2"></div>
<div class="style" id="3"></div>
<div class="style" id="4"></div>
<div class="style" id="5"></div>
<div class="style" id="6"></div>
<div class="style" id="7"></div>
<div class="style" id="8"></div>
<div class="style" id="9"></div>
I am struggling with the css part
For positioning items like show in your image, you can use display: grid;. I made the grid to have 4 columns and 3 rows.
Lastly, one item is bigger than the others. You can change the space the item uses by adjusting the grid-column and grid-row:
* {
margin: 0;
padding: 0;
}
body {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3,1fr);
max-width: 400px;
}
div {
min-width: 100px;
min-height: 100px;
border: 1.5px solid black;
}
#one {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
#one,
#three,
#four,
#six,
#eight {
background-color: red;
}
#two,
#five,
#seven,
#nine {
background-color: blue;
}
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
<div id="seven"></div>
<div id="eight"></div>
<div id="nine"></div>
Not using the html you gave but this is a approach with display: flex . I did not optimize the styling so you can see what is happening.
* {
box-sizing: border-box;
}
.row-full {
display: flex;
flex-wrap: wrap;
width: 240px;
}
.row-half {
display: flex;
flex-wrap: wrap;
width: 120px;
}
.block-big {
width: 120px;
height: 120px;
border: 1px solid black;
}
.block {
width: 60px;
height: 60px;
border: 1px solid black;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
<div class="row-full">
<div class="block-big red"></div>
<div class="row-half">
<div class="block blue"></div>
<div class="block red"></div>
<div class="block red"></div>
<div class="block blue"></div>
</div>
</div>
<div class="row-full">
<div class="block red"></div>
<div class="block blue"></div>
<div class="block red"></div>
<div class="block blue"></div>
</div>
I would use css grid for this. css grid makes it able for you to make a more complex css layout. I made this quick example that shows how you can use it.
.grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
width: 100vw;
height: 100vh;
background-color: red;
}
.style1{
grid-column: 1/3;
grid-row: 1/3;
background-color: blue;
}
.style2{
grid-column: 3/4;
grid-row: 1/2;
background-color: green;
}
.style3{
grid-column: 3/4;
grid-row: 2/3;
background-color: yellow;
}
.style4{
grid-column: 4/5;
grid-row: 1/3;
background-color: pink;
}
.style5{
grid-column: 1/4;
grid-row: 3/4;
background-color: orange;
}
.style6{
grid-column: 4/5;
grid-row: 3/4;
background-color: purple;
}
<div class="grid">
<div class="style1" id="1"></div>
<div class="style2" id="2"></div>
<div class="style3" id="3"></div>
<div class="style4" id="4"></div>
<div class="style5" id="5"></div>
<div class="style6" id="6"></div>
</div>
This is another answer :
html, body{
font-family: sans-serif;
}
#container{
display:grid;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
}
#container div{
border:1px solid #000000;
}
#div1{
background-color: red;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
#div2{
background-color: blue;
}
#div3{
background-color: red;
}
#div4{
background-color: red;
}
#div5{
background-color: blue;
}
#div6{
background-color: red;
}
#div7{
background-color: blue;
}
#div8{
background-color: red;
}
#div9{
background-color: blue;
}
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"></div>
<div id="div9"></div>
I want divide my HTML Page into 4 different vertical sections .
I want each section to have a different background color, for that I used div but it each background color does not cover the sides of each section.
** My aspire end result:
I don't want to see the color red of the body background color in the html.
body {
background-color: red;
}
.intro {
background-color: #674AB3;
}
.edu {
background-color: #A348A6;
}
.Skills {
background-color: #9F63C4;
}
.end {
background-color: #9075D8;
}
<div class="intro">
<hr>
</div>
<div class="edu">
<hr>
</div>
<div class="Skills">
<hr>
</div>
<div class="end">
<hr>
</div>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
.flex-container>div {
margin:30px;
}
.flex-container hr {
width: 100px;
height: 100px;
padding: 5px;
margin: 10px;
border-color: #FFF;
box-shadow: none;
border-width: 5px;
}
.intro {
background-color: #674AB3;
}
.edu {
background-color: #A348A6;
}
.Skills {
background-color: #9F63C4;
}
.end {
background-color: #9075D8;
}
<div class="flex-container">
<div class="intro"><hr></div>
<div class="edu"><hr></div>
<div class="Skills"><hr></div>
<div class="end"><hr></div>
</div>
Set margin: 0 for body, it has a defualt margin.
Set <hr>'s margin to 0.
Set height for each div to be 25vh (vertical height).
body {
background-color: red;
margin: 0;
}
.intro {
background-color: #674AB3;
height: 25vh;
}
.edu {
background-color: #A348A6;
height: 25vh;
}
.Skills {
background-color: #9F63C4;
height: 25vh;
}
.end {
background-color: #9075D8;
height: 25vh;
}
hr {
margin: 0;
}
<div class="intro">
<hr/>
</div>
<div class="edu">
<hr/>
</div>
<div class="Skills">
<hr/>
</div>
<div class="end">
<hr/>
</div>
You could try using grid! might as well make it responsive :D
This is to have 4 sections laying one next to another, to make them stack in the vertical direction, change:
grid-template-columns: repeat(4, 1fr);
to:
grid-template-rows: repeat(4, 1fr);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #00000000; /* transparent color */
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 vertical sections */
height: 100vh;
margin: auto;
}
.intro {
background-color: #674AB3;
}
.edu {
background-color: #A348A6;
}
.Skills {
background-color: #9F63C4;
}
.end {
background-color: #9075D8;
}
<div class="intro">
<p>intro</p>
</div>
<div class="edu">
<p>edu</p>
</div>
<div class="Skills">
<p>Skills</p>
</div>
<div class="end">
<p>end</p>
</div>
Something like this?
body {
background-color: red;
}
.intro {
height:200px;
background-color: #674AB3 !important;
}
.edu {
height:200px;
background-color: #A348A6 !important;;
}
.Skills {
height:200px;
background-color: #9F63C4 !important;;
}
.end {
height:200px;
background-color: #9075D8 !important;;
}
<div class="intro">
<hr>
</div>
<div class="edu">
<hr>
</div>
<div class="Skills">
<hr>
</div>
<div class="end">
<hr>
</div>
You can try this approach as well.
body {background-color:transparent;}
.intro {
background-color: #674AB3;
height:100vh;
width:100%;
}
.edu {
background-color: #A348A6;
height:100vh;
width:100%;
}
.Skills {
background-color: #9F63C4;
height:100vh;
width:100%;
}
.end {
background-color: #9075D8;
height:100vh;
width:100%;
}
.wrapper {
display:grid;
height:100vh;
width:100%;
}
<div class="wrapper">
<div class="intro">
Hello
</div>
<div class="edu">
Hello
</div>
<div class="Skills">
Hello
</div>
<div class="end">
Hello
</div>
</div>
You can simmply use display: flex to the parent container which is flex-container
like
<div style="display: flex;">
<div class="intro"><hr></div>
<div class="edu"><hr></div>
<div class="Skills"><hr></div>
<div class="end"><hr></div>
</div>
<div class="intro">
</div>
<div class="edu">
</div>
<div class="Skills">
</div>
<div class="end">
</div>
</div>
body {
background-color: red;
}
.main{
display: flex;
grid-template-columns: repeat(4,1fr);
width:100vw;
}
.intro {
background-color: #674AB3;
width: 25%;
height: 75vh;
}
.edu {
background-color: #A348A6;
width: 25%;
height: 75vh;
}
.Skills {
background-color: #9F63C4;
width: 25%;
height: 75vh;
}
.end {
background-color: #9075D8;
width: 25%;
height: vh;
}
grid
<div class="main">
<div class="intro">
</div>
<div class="edu">
</div>
<div class="Skills">
</div>
<div class="end">
</div>
.main{
display: flex;
grid-template-columns: repeat(4,1fr);
width:100vw;
}
.intro {
background-color: #674AB3;
width: 25%;
height: 75vh;
}
.edu {
background-color: #A348A6;
width: 25%;
height: 75vh;
}
.Skills {
background-color: #9F63C4;
width: 25%;
height: 75vh;
}
.end {
background-color: #9075D8;
width: 25%;
height:75vh;
}
I hope you're well!
I am a bit new in writing css and I would like to achieve this result, but how?
Here is my try and I will be grateful for any advice and explanations.
<style>
#wrapper {
width: auto;
height: auto;
box-sizing: border-box;
display: grid;
grid-auto-flow: row;
grid-template-columns: repeat(6, 1fr);
}
#left{
text-align: left;
grid-column: 1/4;
margin-top: 2px;
background-color: red;
height: 200px;
}
#right {
text-align: right;
height: 100px;
padding-top: 10px;
margin-top: 2px;
grid-column: 4/6;
background-color: blue;
margin-left: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left" > div1 </div>
<div id="right" style="height:50px;"> div2 </div>
<div id="right" > div3 </div>
<div id="right" style="height:50px;"> div4 </div>
</div>
</body>
I think it's generally useful to think of these kinds of things as big blocks that contain smaller blocks. From that perspective you first have a layout with two columns, which you can achieve with a couple of simple grid or flex rules. There are many ways to do this, but here it is using grid:
.main-layout {
display: grid;
grid-template-columns: .35fr 1fr;
gap: 1rem;
min-height: 70vh;
}
.sidebar {
padding: 1rem;
background: skyblue;
}
.content {
padding: 1rem;
background: aliceblue;
}
<div class="main-layout">
<div class="sidebar">sidebar</div>
<div class="content">content</div>
</div>
Once you have that, you can fill in the "content" block without thinking much about the outer layout. This makes it pretty straightforward:
section {
padding: 0.5em;
margin-bottom: 1rem;
background: lightblue;
}
h1 {
font-size: 1.2rem;
margin: 0;
border-bottom: 1px solid white;
}
/* outer layout -- same as before */
.main-layout {
display: grid;
grid-template-columns: .35fr 1fr;
gap: 1rem;
min-height: 70vh;
}
.sidebar {
padding: 1rem;
background: skyblue;
}
.content {
padding: 1rem;
background: aliceblue;
}
<div class="main-layout">
<div class="sidebar">sidebar</div>
<div class="content">
<section>
<h1>This is a heading</h1>
<p>And this is content</p>
</section>
<section>
<h1>This is a heading</h1>
<p>And this is content</p>
</section>
<section>
<h1>This is a heading</h1>
<p>And this is content</p>
</section>
</div>
</div>
I have a sidebar. I have main content. I want to position my main content div next to my left side bar. My main content div is in the form of a CSS-grid layout. I determined the grid will be best to contain the information I need to display, depicted by a mock-up I was given. I was exploring the option of making the entire HTML page a grid, but I am unsure how to tackle this. So, I figured I will make create a div for my side bar and make it stay there while my main content, the grid, will move around that. But to no avail.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid</title>
<link rel="stylesheet" type="text/css" href="styles/normalize.css">
<link rel="stylesheet" type="text/css" href="scratch.css">
</head>
<style>
body {
background: darkgrey;
height: 1000px;
position: relative;
}
.side-bar {
background: red;
padding: 0;
margin: 0;
width: 202px;
height: 100%;
position: relative;
}
.side-bar p{
padding: 0;
margin: 0;
}
.grid-container {
display: grid;
background: #E1E1E1;
height: 500px;
width: 1100px;
grid-template-columns: 250px 250px 250px 250px;
grid-template-rows: 200px 200px;
grid-gap: 30px 20px;
padding: 0;
margin: 0 25px 0 30px;
justify-content: right;
align-content: center;
position: relative;
left: 400px;
}
.grid-items {
font-weight: bold;
}
.grid-item1 {
background: greenyellow;
}
.grid-item2 {
background: rosybrown;
}
.grid-item3 {
background: cadetblue;
}
.grid-item4 {
background: darkturquoise;
}
.grid-item5 {
background: darkkhaki;
grid-column: span 2;
}
.grid-item6 {
background: lightblue;
grid-column: span 2;
}
</style>
<body>
<div class="side-bar">
<p>Side Bar</p>
</div>
<div class="grid-container">
<div class="grid-items grid-item1">
<p>Grid Item 1</p>
</div>
<div class="grid-items grid-item2">
<p>Grid Item 2</p>
</div>
<div class="grid-items grid-item3">
<p>Grid Item 3</p>
</div>
<div class="grid-items grid-item4">
<p>Grid Item 4</p>
</div>
<div class="grid-items grid-item5">
<p>Grid Item 5</p>
</div>
<div class="grid-items grid-item6">
<p>Grid Item 6</p>
</div>
</div>
</body>
</html>
Your best bet is to have a main grid that contains the sidebar and a grid inside it that contains the main content:
body,
html {
background: darkgrey;
height: 100%;
margin: 0;
}
#horizontal-menu {
background: lightblue;
padding: 8px;
margin-bottom: 15px;
}
#horizontal-menu p {
margin: 0;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-gap: 15px;
height: 100%;
}
.side-bar {
background: red;
padding: 0;
margin: 0;
height: 100%;
grid-column: 1 / 2;
}
.grid-items-container {
grid-column: 2 / 3;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 30px 20px;
background: #E1E1E1;
padding: 15px;
}
.side-bar p {
padding: 0;
margin: 0;
}
.grid-items {
font-weight: bold;
}
.grid-item1 {
background: greenyellow;
}
.grid-item2 {
background: rosybrown;
}
.grid-item3 {
background: cadetblue;
}
.grid-item4 {
background: darkturquoise;
}
.grid-item5 {
background: darkkhaki;
grid-column: span 2;
}
.grid-item6 {
background: lightblue;
grid-column: span 2;
}
<div id="horizontal-menu">
<p>Menu</p>
</div>
<div class="grid-container">
<div class="side-bar">
<p>Side Bar</p>
</div>
<div class="grid-items-container">
<div class="grid-items grid-item1">
<p>Grid Item 1</p>
</div>
<div class="grid-items grid-item2">
<p>Grid Item 2</p>
</div>
<div class="grid-items grid-item3">
<p>Grid Item 3</p>
</div>
<div class="grid-items grid-item4">
<p>Grid Item 4</p>
</div>
<div class="grid-items grid-item5">
<p>Grid Item 5</p>
</div>
<div class="grid-items grid-item6">
<p>Grid Item 6</p>
</div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid</title>
<link rel="stylesheet" type="text/css" href="styles/normalize.css">
<link rel="stylesheet" type="text/css" href="scratch.css">
</head>
<style>
html,body {
background: darkgrey;
height: 100%;
position: relative;
}
.side-bar {
background: red;
padding: 0;
margin: 0;
width: 202px;
height: 100%;
position: absolute;
left:0;
display: block;
}
.side-bar p {
padding: 0;
margin: 0;
}
.main-content {
display: block;
height: 500px;
width: 1100px;
position: absolute;
left: 203px;
}
.grid-container {
display: grid;
height: 500px;
width: 1100px;
background: #E1E1E1;
grid-template-columns: 250px 250px 250px 250px;
grid-template-rows: 200px 200px;
grid-gap: 30px 20px;
padding: 0;
margin: 0 25px 0 30px;
justify-content: right;
align-content: center;
position: relative;
}
.grid-items {
font-weight: bold;
}
.grid-item1 {
background: greenyellow;
}
.grid-item2 {
background: rosybrown;
}
.grid-item3 {
background: cadetblue;
}
.grid-item4 {
background: darkturquoise;
}
.grid-item5 {
background: darkkhaki;
grid-column: span 2;
}
.grid-item6 {
background: lightblue;
grid-column: span 2;
}
</style>
<body>
<div class="side-bar">
<p>Side Bar</p>
</div>
<div class="main-content">
<div class="grid-container">
<div class="grid-items grid-item1">
<p>Grid Item 1</p>
</div>
<div class="grid-items grid-item2">
<p>Grid Item 2</p>
</div>
<div class="grid-items grid-item3">
<p>Grid Item 3</p>
</div>
<div class="grid-items grid-item4">
<p>Grid Item 4</p>
</div>
<div class="grid-items grid-item5">
<p>Grid Item 5</p>
</div>
<div class="grid-items grid-item6">
<p>Grid Item 6</p>
</div>
</div>
</div>
</body>
</html>
Absolute positioning is one option you may want to try. Not sure how much responsiveness you want on your page.
Use for div display: table-cell;
body {
background: darkgrey;
height: 1000px;
}
.right-content,
.side-bar {
display: table-cell;
}
.side-bar {
background: red;
padding: 0;
margin: 0;
width: 30%;
height: 100%;
position: relative;
}
.side-bar p {
padding: 0;
margin: 0;
}
.right-content {
width: 70%;
}
.grid-container {
display: grid;
padding:10px;
background: #E1E1E1;
height: 500px;
grid-template-columns: 250px 250px 250px 250px;
grid-template-rows: 200px 200px;
grid-gap: 30px 20px;
margin: 0 25px 0 30px;
justify-content: right;
align-content: center;
position: relative;
}
.grid-items {
font-weight: bold;
}
.grid-item1 {
background: greenyellow;
}
.grid-item2 {
background: rosybrown;
}
.grid-item3 {
background: cadetblue;
}
.grid-item4 {
background: darkturquoise;
}
.grid-item5 {
background: darkkhaki;
grid-column: span 2;
}
.grid-item6 {
background: lightblue;
grid-column: span 2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid</title>
<link rel="stylesheet" type="text/css" href="styles/normalize.css">
<link rel="stylesheet" type="text/css" href="scratch.css">
</head>
<body>
<div class="container">
<div class="side-bar">
<p>Side Bar</p>
</div>
<div class="right-content">
<div class="grid-container">
<div class="grid-items grid-item1">
<p>Grid Item 1</p>
</div>
<div class="grid-items grid-item2">
<p>Grid Item 2</p>
</div>
<div class="grid-items grid-item3">
<p>Grid Item 3</p>
</div>
<div class="grid-items grid-item4">
<p>Grid Item 4</p>
</div>
<div class="grid-items grid-item5">
<p>Grid Item 5</p>
</div>
<div class="grid-items grid-item6">
<p>Grid Item 6</p>
</div>
</div>
</div>
</div>
</body>
</html>
I am displaying two columns in the center of my grid with contents and I need to make these two columns above each other in mobile view how I can do that?
.two-pics {
display: grid;
grid-gap: 50px;
grid-template-columns: 400px 400px;
object-fit: cover;
color: #444;
margin-top: 100px;
justify-content: center;
}
.box {
background-color: white;
color: #fff;
border-radius: 5px;
font-size: 150%;
}
.a {
grid-column: 1;
grid-row: 1 / 12;
}
.b {
grid-column: 2;
grid-row: 1 / 12;
}
<div class="two-pics">
<div class="box a">
<img src="assets/images/pic1.jpg">
<br>
<p>title</p>
<ul>
<li></li>
<li>dfgdfghdfhdfh</li>
<li>dfgdfghdfhdfh</li>
<li>dfgdfghdfhdfh</li>
</ul>
</div>
<div class="box b">
<img src="assets/images/pic2.jpg">
<br>
<p>ldkjh ldkjfh ldk hjf</p>
</div>
</div>
Using the auto-fit property you can create as many 400px grid tracks as will fit in the container.
codepen
body {
background: grey;
}
.two-pics {
display: grid;
grid-gap: 50px;
grid-template-columns: repeat(auto-fit, 400px);
color: #444;
margin-top: 100px;
justify-content: center;
}
.box {
background-color: white;
color: #000;
border-radius: 5px;
font-size: 150%;
}
<div class="two-pics">
<div class="box a">
<img src="https://unsplash.it/400">
<br>
<p>title</p>
<ul>
<li>dfdfd</li>
<li>dfgdfghdfhdfh</li>
<li>dfgdfghdfhdfh</li>
<li>dfgdfghdfhdfh</li>
</ul>
</div>
<div class="box b">
<img src="https://unsplash.it/400">
<br>
<p>ldkjh ldkjfh ldk hjf</p>
</div>
</div>