I'm trying to develop set of div elements as in the following image expanding the full web page.But I don't have any idea how to do it.The div elements may have any heights and widths but the appreance should be as follows
please help me to do this
You could try using css grid. You divide the page in columns and rows
* {
margin: 0;
padding: 0;
}
.main-grid {
display: grid;
width: 500px;
height: 370px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 10px;
}
.main-grid :nth-child(1) {
background: orange;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: -1;
}
.main-grid :nth-child(2) {
background: blue;
grid-column-start: 2;
grid-column-end: -1;
grid-row-start: 1;
grid-row-end: 2;
}
.main-grid :nth-child(3) {
background: green;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: -1;
}
.main-grid :nth-child(4) {
background: yellow;
grid-column-start: 3;
grid-column-end: -1;
grid-row-start: 2;
grid-row-end: -1;
}
<div class="main-grid">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
This is a task for CSS grid - a very good tool for building responsive layouts. You can read more about it here: CSS Grid
HTML:
<html>
<div class="grid">
<div class="left"></div>
<div class="right-up"></div>
<div class= "right-down-a"></div>
<div class= "right-down-b"> </div>
</div>
</html>
CSS:
.grid {
display: grid;
position: absolute;
top: 0;
left: 0;
grid-template-columns: 33vw 33vw 33vw;
grid-template-rows: 50vh 50vh;
grid-template-areas:
"left right-up right-up"
"left right-down-a right-down-b";
grid-gap: 5px;
}
.left {
grid-area: left;
background-color: blue;
}
.right-up {
grid-area: right-up;
background-color: green;
}
.right-down-a{
grid-area: right-down-a;
background-color: red;
}
.right-down-b{
grid-area: right-down-b;
background-color: purple;
}
JSfiddle: Fiddle link
Related
I'm just starting to work with grid for a website layout in html. My problem is that when creating the h1 within the grid, it slides out. Strangely, the h1 is not fixed in the grid.
Maybe someone can show me a short example how to get these elements into the grid cell so that they are adjusted
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50px 1fr 1fr 100px;
gap: 10px;
padding: 10px;
box-sizing: border-box;
}
.container div {
padding: 10px;
border: 1px solid #000000;
}
.gird-header {
grid-column-start: 1;
grid-column-end: 4;
}
header {
grid-area: header;
}
h1 {
text-align: center;
}
.content-game {
grid-row-start: 2;
grid-row-end: span 2;
grid-column-start: 1;
grid-column-end: 3;
}
.content-player {
grid-column-start: 3;
grid-column-end: 4;
;
grid-row-start: 2;
grid-row-end: span 1;
}
.content.buttons {
grid-column-start: 4;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: span 1;
}
.content-footer {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: span 1;
}
<div class="container">
<header class="grid-header">
<h1>Mensch Aerger dich nicht</h1>
</header>
<div class="content-game">Spiel</div>
<div class="content-player">Spieler</div>
<div class="content-buttons">Buttons</div>
<div class="content-footer">Footer</div>
</div>
It's because you've allocated a grid-area to the header element and you've not defined it (using grid-template-areas see here developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas) so the browser doesn't know where to put it. You've also got a syntax error in that you've defined .grid-header in your html and gird-header in your CSS. Remove the grid-area property and rename your class in your CSS and it'll work.
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/* made the first row 100px rather than 50px so the header will fit */
grid-template-rows: 100px 1fr 1fr 100px;
gap: 10px;
padding: 10px;
box-sizing: border-box;
}
.container div {
padding: 10px;
border: 1px solid #000000;
}
.grid-header { /* fixed syntax error */
grid-column-start: 1;
grid-column-end: 4;
}
header {
/* removed this grid-area: header; */
}
h1 {
text-align: center;
}
.content-game {
grid-row-start: 2;
grid-row-end: span 2;
grid-column-start: 1;
grid-column-end: 3;
}
.content-player {
grid-column-start: 3;
grid-column-end: 4;
;
grid-row-start: 2;
grid-row-end: span 1;
}
.content.buttons {
grid-column-start: 4;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: span 1;
}
.content-footer {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: span 1;
}
<div class="container">
<header class="grid-header">
<h1>Mensch Aerger dich nicht</h1>
</header>
<div class="content-game">Spiel</div>
<div class="content-player">Spieler</div>
<div class="content-buttons">Buttons</div>
<div class="content-footer">Footer</div>
</div>
I'm trying to make a layout with a "page".
I would have 3 columns, 1st and 3th would use only 10% of the space, and the middle 80%. Until there no problem. But I would like that as soon as the middle part reach 64rem, it's only the first and last column that grow.
Currently I've tried this:
.container {
display: grid;
grid-template-columns: 10% minmax(80%, 64rem) 10%;
grid-template-rows: min-content auto;
min-height: 100vh;
background-color: red;
}
.header {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
background-color: blue;
}
.content {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
background-color: yellow;
}
<div class="container">
<div class="header">
header
</div>
<div class="content">
content
</div>
</div>
But it doesn't stops at 64rem. Any idea how to adress this issue?
Replace the 10% with 1fr and consider min() instead of minmax(). I used 32rem instead of 64rem to easily demonstrate the trick
.container {
display: grid;
grid-template-columns: 1fr min(80%, 32rem) 1fr;
grid-template-rows: min-content auto;
min-height: 100vh;
background-color: red;
}
.header {
grid-column: 2;
background-color: blue;
}
.content {
grid-column: 2;
background-color: yellow;
}
<div class="container">
<div class="header">
header
</div>
<div class="content">
content
</div>
</div>
You can also use padding and simplify the code like below:
.container {
display: grid;
padding-inline: max(10%,(100% - 32rem)/2);
grid-template-rows: min-content 1fr;
min-height: 100vh;
background-color: red;
}
.header {
background-color: blue;
}
.content {
background-color: yellow;
}
<div class="container">
<div class="header">
header
</div>
<div class="content">
content
</div>
</div>
You need to think otherwise and set width and max-width on the container itself. your template becomes then : 1fr auto 1fr , wher both sides will grow as much as the middle column will allow them to.
Example below
.container {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows: min-content auto;
min-height: 100vh;
background-color: red;
}
.header {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
background-color: blue;
}
.content {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
background-color: yellow;
width:80vw;/* where the parent container fills the whole screen's width */
max-width:64rem;
}
<div class="container">
<div class="header">
header
</div>
<div class="content">
content
</div>
</div>
Simple code that took me +9 hours to make, sad reality. I tried a lot of tutorials and pages, but even they are unable to help me. I copied/modified multiple lines of code that I came across, but none does anything. This is just a learning page, where I'm trying to incorporate grid responsiveness for variety of devices.
I attached screens below, with how it is, and how I want it to be.
I believe it is quite simple thing to do, seing how some tutorial code consists of 1/2 lines, but it still seems too much for me to comprehend it.
Code below is work in progress, and responsiveness seems to be todays standard, and if anyone can explain to me how to do it, I will be grateful.
<div class="container">
<div class="top">
<div class="t_e1"></div>
<div class="t_e2"></div>
<div class="t_e3"></div>
</div>
<div class="main"></div>
<div class="bottom">
<div class="b_e1"></div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100fv;
background-color: brown;
}
.container {
min-height: 100%;
background-color: aquamarine;
grid-template-columns: 1fr 1fr;
display: grid;
}
.top {
background-color: blue;
display: grid;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.t_e1 {
background-color: antiquewhite;
display: grid;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
.main {
background-color: blueviolet;
display: grid;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 5;
}
.bottom {
background-color: chartreuse;
display: grid;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 5;
grid-row-end: 6;
}
.b_e1 {
background-color: coral;
display: grid;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 6;
}
[Currently][1]
[Desired effect][2]
[1]: https://i.stack.imgur.com/Vs0lR.jpg
[2]: https://i.stack.imgur.com/wUH7H.jpg
This is my solution:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100fv;
background-color: brown;
}
.container {
min-height: 100%;
background-color: aquamarine;
grid-template-columns: 1fr 1fr;
display: grid;
}
.top {
background-color: blue;
display: grid;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.t_e1 {
background-color: antiquewhite;
display: grid;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
.main {
background-color: blueviolet;
display: grid;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 5;
}
.bottom {
background-color: chartreuse;
display: grid;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 5;
grid-row-end: 6;
}
.b_e1 {
background-color: coral;
display: grid;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 6;
}
/*new code from here*/
#media (max-width: 640px) {
.top,
.bottom {
display: flex;
flex-direction: column-reverse;
}
.t_e1,
.t_e2,
.t_e3,
.b_e1 {
display: block;
}
.t_e1,
.b_e1 {
height: 15vh;
}
}
<div class="container">
<div class="top">
<div class="t_e1"></div>
<div class="t_e2"></div>
<div class="t_e3"></div>
</div>
<div class="main"></div>
<div class="bottom">
<div class="b_e1"></div>
</div>
</div>
The media query can be set to the desired "screen size" you want your responsive look to appear.
So the word responsiveness is a bit vague. Do you mean that the grids should be expanding to the width of window? if so that is the default behaviour. Or did you mean grid should stack up vertically when screen width gets small enough. I'd assume that's what you meant.
HTML
<div class="cont">
<div class="a"></div>
<div class="b"></div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.cont {
display: flex;
margin-bottom: 10px;
}
.a,
.b {
flex: 1;
padding: 20px;
}
.a {
background: red;
}
.b {
background-color: blue;
max-width: 300px;
}
#media screen and (max-width: 1000px) {
.cont {
flex-direction: column;
}
.b {
max-width: none;
}
}
Explanation:
I create 2 divs
Each div has two more divs
Container divs have css flexbox property
Child divs get flex: 1 which tells them to expand (learn flexbox properly) https://www.codecademy.com/learn/learn-intermediate-css/modules/layout-with-flexbox
div B has max width so it expands but not more than that
I use media query max-width which makes it that styles under only apply IF the condition is met, the condition here is that width of browser is NOT more than 1000px
In there I change flexbox-direction to column, which means child divs will stack vertically not horizontally
I also remove the max-width on div B
I am trying to make a square 2 x 2 grid with a rectangular column on the right-hand side.
I have tried using a grid system for the 2 x 2, but it messes with the rectangular column on the right.
Here is a reference:
This is a 2x3 grid you're trying to display. You need a container and 5 children in that container. Then you can apply CSS grid rules and particularly grid-template-areas and grid-area. Below is a demonstration of it looks like:
.container {
display: grid;
grid-template-rows: repeat(2, auto);
grid-template-columns: repeat(3, auto);
grid-template-areas:
"one two five"
"three four five";
grid-gap: 30px;
height: 400px;
background: #eee;
padding: 30px;
}
.item {
background: #fff;
}
.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="item one"></div>
<div class="item two"></div>
<div class="item three"></div>
<div class="item four"></div>
<div class="item five"></div>
</div>
body {
display: grid;
grid-template-columns: 4% 30% 1% 30% 1% 30% 4%;
grid-template-rows: 2% auto 5px auto 2%;
margin: 0 0 0 0;
padding: 0 0 0 0;
background-color: grey;
}
#leftTop {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
#leftBottom {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 3;
}
#centerTop {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 4;
grid-row-end: 5;
}
#centerBottom {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 4;
grid-row-end: 5;
}
#rightFull {
grid-column-start: 6;
grid-column-end: 7;
grid-row-start: 2;
grid-row-end: 5;
}
div {
min-height: 100px;
background-color: blue;
}
<body>
<div id="leftTop">LT</div>
<div id="leftBottom">LB</div>
<div id="centerTop">CT</div>
<div id="centerBottom">CB</div>
<div id="rightFull">RF</div>
</body>
Easy to achieve with a grid-system. Its a grid with 3 columns and 2 rows. The right column just spans over 2 rows.
I'm trying to create a simple css grid using the native CSS Grid properties. It works as I wanted, except I want to create a utility class that can center a column in a grid.
Is there a way to create the __centered utility class, so that I can apply it to center columns? I know I could add empty column divs before the column, but I want a cleaner solution.
.l-wrap {
width: 100%;
max-width: 1196px;
margin: 0 auto;
}
.l-grid {
display: grid;
grid-gap: 52px;
grid-template-columns: repeat(6, 1fr);
background-color: orangered;
}
.l-grid--col {
grid-column: auto/span 6;
}
.l-grid--col-1 {
grid-column: auto/span 1;
background-color: lightblue;
}
.l-grid--col-2 {
grid-column: auto/span 2;
background-color: lightblue;
}
.l-grid--col-3 {
grid-column: auto/span 3;
background-color: lightblue;
}
.l-grid--col-4 {
grid-column: auto/span 4;
background-color: lightblue;
}
.l-grid--col-5 {
grid-column: auto/span 5;
background-color: lightblue;
}
.l-grid--col-6 {
grid-column: auto/span 6;
background-color: lightblue;
}
<div class="l-wrap">
<div class="l-grid l-grid__centered">
<div class="l-grid--col-2">
<p>This should span 2 and be centered.</p>
</div>
</div>
</div>
CSS Grid provides the justify-items and justify-self properties, which can be used for aligning grid items along the row-axis.
justify-items applies to the grid container. justify-self applies to grid items.
So your utility class can look something like this:
.l-grid__centered {
justify-self: center;
grid-column: 1 / -1;
}
This tells the grid item to center itself on the row in a grid area spanning from the first to last columns. (Negative integer values on grid-column and grid-row start the count from the end side.)
.l-wrap {
width: 100%;
max-width: 1196px;
margin: 0 auto;
}
.l-grid {
display: grid;
grid-gap: 52px;
grid-template-columns: repeat(6, 1fr);
background-color: orangered;
}
.l-grid--col {
grid-column: auto/span 6;
}
.l-grid--col-1 {
grid-column: auto/span 1;
background-color: lightblue;
}
.l-grid--col-2 {
grid-column: auto/span 2;
background-color: lightblue;
}
.l-grid--col-3 {
grid-column: auto/span 3;
background-color: lightblue;
}
.l-grid--col-4 {
grid-column: auto/span 4;
background-color: lightblue;
}
.l-grid--col-5 {
grid-column: auto/span 5;
background-color: lightblue;
}
.l-grid--col-6 {
grid-column: auto/span 6;
background-color: lightblue;
}
.l-grid__centered {
justify-self: center;
grid-column: 1 / -1;
}
<div class="l-wrap">
<div class="l-grid l-grid__centered">
<div class="l-grid--col-2">
<p>This should span 2 and be centered.</p>
</div>
</div>
</div>
jsFiddle demo
NOTE: The utility class is applied to the grid item, not the grid container. Also, this method breaks the 2-column grid area of the original content. The centered content will be able to expand across the entire row.
Alternatively, when working with a six-column grid, to horizontally center a two-column grid area, your utility class can look like this:
.__centered {
grid-column: 3 / span 2;
}
OR
.__centered {
grid-column: 3 / -3;
}
.l-wrap {
width: 100%;
max-width: 1196px;
margin: 0 auto;
}
.l-grid {
display: grid;
grid-gap: 52px;
grid-template-columns: repeat(6, 1fr);
background-color: orangered;
}
.l-grid--col {
grid-column: auto/span 6;
}
.l-grid--col-1 {
grid-column: auto/span 1;
background-color: lightblue;
}
.l-grid--col-2 {
grid-column: auto/span 2;
background-color: lightblue;
}
.l-grid--col-3 {
grid-column: auto/span 3;
background-color: lightblue;
}
.l-grid--col-4 {
grid-column: auto/span 4;
background-color: lightblue;
}
.l-grid--col-5 {
grid-column: auto/span 5;
background-color: lightblue;
}
.l-grid--col-6 {
grid-column: auto/span 6;
background-color: lightblue;
}
.l-grid__centered {
grid-column: 3 / span 2;
text-align: center;
}
<div class="l-wrap">
<div class="l-grid">
<div class="l-grid--col-2 l-grid__centered">
<p>This should span 2 and be centered.</p>
</div>
</div>
</div>
jsFiddle demo
NOTE: This solution only centers even-numbered grid areas.