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.
Related
I am attempting a grid layout, but can't seem to get the left, middle and right to span 4 columns each, along the same row in a 12 column grid.
-------------------------------------------------------------------------
- Header -
-------------------------------------------------------------------------
-------------------------------------------------------------------------
- Nav -
-------------------------------------------------------------------------
-------------------------------------------------------------------------
- Banner
- Banner -
-------------------------------------------------------------------------
----------------------- ----------------------- ------------------------
- - - - - -
- left - - middle - - right -
- - - - - -
- - - - - -
------------------------ ----------------------- ------------------------
-------------------------------------------------------------------------
- footer - footer -
- - -
-------------------------------------------------------------------------
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 10px;
position: relative;
}
header {
grid-column-start: 1;
grid-column-end: 13;
grid-row-start: 1;
grid-row-end: 2;
background: #3bbced;
padding: 30px;
}
nav {
grid-column-start: 1;
grid-column-end: 13;
grid-row-start: 2;
grid-row-end: 3;
background: #3bbced;
padding: 30px;
}
main {
grid-column-start: 1;
grid-column-end: 13;
background: grey;
}
.span-12 {
grid-column-start: span 13;
grid-row-start: 3;
grid-row-end: 4;
background: red;
padding: 30px;
}
.left {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: 5;
background: green;
padding: 30px;
}
.middle {
grid-column-start: 5;
grid-column-end: 9;
grid-row-start: 4;
grid-row-end: 5;
background: yellow;
padding: 30px;
}
.right {
grid-column-start: 10;
grid-column-end: 13;
grid-row-start: 4;
grid-row-end: 5;
background: orange;
padding: 30px;
}
footer {
grid-column: span 12;
grid-row: 9 / 10;
}
<div class="container">
<header class="logo">Header</header>
<nav>
<ul>
Home
Menu
Book
About
</ul>
</nav>
<main>
<article class="span-12">Ipsum</article>
<section class="left">Ipsum</section>
<section class="middle">Ipsum</section>
<section class="right">Ipsum</section>
</main>
<footer>
<div class="footer-col-left">small logo</div>
<div class="footer-col-right">copywrite</div>
</footer>
</div>
If you have display:grid set on an element this this will only affect it's immediate children. In your case the grid will take effect on the element main since this is the direct child of container.
If you want the grid to affect the left,middle,right as well as the footer columns you would either have to pull them out of their respective parents or you can set main and footer to have the same grid as it's parent.
display: grid;
grid-template-columns: inherit;
I don't know if you will be using the grid on container in any other way than presented in this question. But you might consider not using a grid on container and just putting it on the elements that needs columns.
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 10px;
position: relative;
}
header {
grid-column-start: 1;
grid-column-end: 13;
grid-row-start: 1;
grid-row-end: 2;
background: #3bbced;
padding: 30px;
}
nav {
grid-column-start: 1;
grid-column-end: 13;
grid-row-start: 2;
grid-row-end: 3;
background: #3bbced;
padding: 30px;
}
main {
grid-column-start: 1;
grid-column-end: 13;
background: grey;
display: grid;
grid-template-columns: inherit;
}
footer{
display: grid;
grid-template-columns: inherit;
}
.span-12 {
grid-column-start: span 13;
grid-row-start: 3;
grid-row-end: 4;
background: red;
padding: 30px;
}
.left {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: 5;
background: green;
padding: 30px;
}
.middle {
grid-column-start: 5;
grid-column-end: 9;
grid-row-start: 4;
grid-row-end: 5;
background: yellow;
padding: 30px;
}
.right {
grid-column-start: 10;
grid-column-end: 13;
grid-row-start: 4;
grid-row-end: 5;
background: orange;
padding: 30px;
}
footer {
grid-column: span 12;
grid-row: 9 / 10;
}
<div class="container">
<header class="logo">Header</header>
<nav>
<ul>
Home
Menu
Book
About
</ul>
</nav>
<main>
<article class="span-12">Ipsum</article>
<section class="left">Ipsum</section>
<section class="middle">Ipsum</section>
<section class="right">Ipsum</section>
</main>
<footer>
<div class="footer-col-left">small logo</div>
<div class="footer-col-right">copywrite</div>
</footer>
</div>
Wrap left-middle-right on a div or section and try this css
display : grid;
grid-template-areas: "a a a";
width: 100%;
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>
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'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
I have a basic CSS grid using display: grid & I'm unable to set the height of the first row using grid-template-rows.
My HTML/CSS looks roughly like this:
.gridWrapper {
display: grid;
height: 100vh;
grid-template-rows: 20px auto auto;
}
.row1 {
grid-row-end: 1;
background-color: lightslategray;
}
.row2 {
grid-row-end: 2;
background-color: lightblue;
}
.row3 {
grid-row-end: 3;
background-color: lightskyblue;
}
.col1 {
grid-column-end: 1;
}
.col2 {
grid-column-end: 2;
}
<div class="gridWrapper">
<div class="row1 col1">Col1</div>
<div class="row1 col2">Col2</div>
<div class="row2 col1">A</div>
<div class="row2 col2">B</div>
<div class="row3 col1">D</div>
<div class="row3 col2">D</div>
</div>
However, it results in this:
This occurs in both latest Chrome & Safari (I'm on Mac), which leads me to believe I've misunderstood something about gridlayout CSS.
How do I set the height of the first row?
You're defining the grid-row-end properties, but you're using the grid-row-start lines. That's why things aren't working as you expect.
If you want .row1 elements to cover the first row, then you need them to span across the row – that means from row line 1 to row line 2.
So instead of this:
grid-row-end: 1
Use any of these this:
grid-row-start: 1
grid-row-end: 2
grid-row: 1 / 2
.gridWrapper {
display: grid;
height: 100vh;
grid-template-rows: 20px auto auto;
}
.row1 {
/* grid-row-end: 1; */
grid-row-end: 2; /* new */
background-color: lightslategray;
}
.row2 {
/* grid-row-end: 2; */
grid-row-end: 3; /* new */
background-color: lightblue;
}
.row3 {
/* grid-row-end: 3; */
grid-row-end: 4; /* new */
background-color: lightskyblue;
}
.col1 {
/* grid-column-end: 1; */
grid-column-end: 2; /* new */
}
.col2 {
/* grid-column-end: 2; */
grid-column-end: 3; /* new */
}
<div class="gridWrapper">
<div class="row1 col1">Col1</div>
<div class="row1 col2">Col2</div>
<div class="row2 col1">A</div>
<div class="row2 col2">B</div>
<div class="row3 col1">D</div>
<div class="row3 col2">D</div>
</div>
The problem is - grid-column-end (MDN) can be a bit misleading. row1 in your example should have grid-column-end: 2; instead of grid-column-end: 1;.
To fix this you can just add 1 to every grid-column-end and grid-row-end property.
Here's snippet with fixed values:
body {
margin: 0;
}
.gridWrapper {
display: grid;
height: 100vh;
grid-template-rows: 20px auto auto;
}
.row1 {
grid-row-end: 2;
background-color: lightslategray;
}
.row2 {
grid-row-end: 3;
background-color: lightblue;
}
.row3 {
grid-row-end: 4;
background-color: lightskyblue;
}
.col1 {
grid-column-end: 2;
}
.col2 {
grid-column-end: 3;
}
<div class="gridWrapper">
<div class="row1 col1">Col1</div>
<div class="row1 col2">Col2</div>
<div class="row2 col1">A</div>
<div class="row2 col2">B</div>
<div class="row3 col1">D</div>
<div class="row3 col2">D</div>
</div>
Also - I don't really see the need for grid-column-end here. You can achieve the same result with just grid-column and grid-row properties (which are less confusing, in my opinion).
body {
margin: 0;
}
.gridWrapper {
display: grid;
height: 100vh;
grid-template-rows: 20px auto auto;
}
.row1 {
grid-row: 1;
background-color: lightslategray;
}
.row2 {
grid-row: 2;
background-color: lightblue;
}
.row3 {
grid-row: 3;
background-color: lightskyblue;
}
.col1 {
grid-column: 1;
}
.col2 {
grid-column: 2;
}
<div class="gridWrapper">
<div class="row1 col1">Col1</div>
<div class="row1 col2">Col2</div>
<div class="row2 col1">A</div>
<div class="row2 col2">B</div>
<div class="row3 col1">D</div>
<div class="row3 col2">D</div>
</div>