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%;
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 have 8 elements in a grid. On a desktop screen they appear properly.
I want element-3 to hide at max-width: 885px and element-2 to expand to width: 100%. I have tried the below code but my element-2 is not expanding to width: 100%.
My CSS is:
.container{
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: repeat(4,1fr);
grid-gap: 1rem;
}
.box {
order: 2px solid black;
background-color: aqua;
padding: 10px;
}
.box:first-child{
grid-column-start: 1;
grid-column-end: 5;
}
.box:nth-child(2){
grid-column-start: 1;
grid-column-end: 4;
}
.box:nth-child(3){
grid-column-start: 4;
grid-column-end: 5;
}
.box:nth-child(4){
grid-column-start: 1;
grid-column-end: 5;
}
.box:nth-child(5){
grid-column-start: 1;
grid-column-end: 3;
}
.box:nth-child(6){
grid-column-start: 3;
grid-column-end: 5;
}
.box:nth-child(7){
grid-column-start: 1;
grid-column-end: 5;
}
.box:last-child{
grid-column-start: 1;
grid-column-end: 5;
}
#media only screen
and (max-width: 885px) {
.box:nth-child(3){
display: none;
}
#item2{
width: 100%;
}
}
And my HTML body tag is :
<div class="container">
<div class="box">Item-1</div>
<div class="box">Item-2</div>
<div class="box">Item-3</div>
<div class="box">Item-4</div>
<div class="box">Item-5</div>
<div class="box">Item-6</div>
<div class="box">Item-7</div>
<div class="box">Item-8</div>
</div>
I have just started learning the grid and media queries.
this is working as expected:
#media only screen
and (max-width: 885px) {
.box:nth-child(3){
display: none;
}
.box:nth-child(2){
grid-column-start: 1;
grid-column-end: 5;
}
}
I'm trying to determine if it's possible for a CSS grid to automatically lay out items that stagger each other on both the column and row level.
It's kinda hard to describe exactly what I'm wanting, so here is an example of how such a grid would look, given the items were in the right order (so not necessarily in the order I have them in the HTML currently):
.grid{
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
grid-auto-rows: 100px;
column-gap: 20px;
row-gap: 20px;
justify-content: center;
}
.grid div{
background-color: gray;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: white;
}
.grid-item-1{
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 3;
}
.grid-item-2{
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 3;
grid-column-end: 4;
}
.grid-item-3{
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
}
.grid-item-4{
grid-row-start: 2;
grid-row-end: 4;
grid-column-start: 1;
grid-column-end: 2;
}
.grid-item-5{
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 2;
grid-column-end: 4;
}
<div class="grid">
<div class="grid-item-1">1</div>
<div class="grid-item-2">2</div>
<div class="grid-item-3">3</div>
<div class="grid-item-4">4</div>
<div class="grid-item-5">5</div>
</div>
I would like to be able to give the items pixel heights and widths and let the grid automatically lay them out in this arrangement, without me having the grid area of each item hard coded.
I've searched for solutions all over, but to no avail. I just want to know if it's possible, or if such a layout is only possible with hard coded grid areas for each item.
All what you need is to set up either the number of rows or columns
.grid{
display: grid;
grid-template-columns: repeat(3, 100px); /* only 3 here */
grid-auto-rows: 100px;
grid-auto-flow:dense; /* don't forget this */
column-gap: 20px;
row-gap: 20px;
justify-content: center;
}
.grid div{
background-color: gray;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: white;
}
.grid-item-1,
.grid-item-5{
grid-row: span 2;
}
.grid-item-2,
.grid-item-4{
grid-column: span 2;
}
<div class="grid">
<div class="grid-item-1">1</div>
<div class="grid-item-2">2</div>
<div class="grid-item-3">3</div>
<div class="grid-item-4">4</div>
<div class="grid-item-5">5</div>
</div>
In this codepen I included my code here. What I want to achieve is that boxes 8 and 9 take up exactly half of the current grid size width-wise. So boxes 8 and 9 should be together with the whole width of the grid and meet in the middle right below box 3. I am writing this in react but this shouldn't be important for the purpose of what I am doing.
const Grid = () => {
return ( <
div class = 'container' >
<
div class = 'cell cell-1' > 1. < /div> <
div class = 'cell cell-2' > 2. < /div> <
div class = 'cell cell-3' > 3. < /div> <
div class = 'cell cell-4' > 4. < /div> <
div class = 'cell cell-5' > 5. < /div> <
div class = 'cell cell-6' > 6. < /div> <
div class = 'cell cell-7' > 7. < /div> <
div class = 'cell cell-8' > 8. < /div> <
div class = 'cell cell-9' > 9. < /div> < /
div >
);
};
const App = () => {
return ( <
div >
<
Grid / >
<
/div>
);
};
ReactDOM.render( <
React.StrictMode >
<
App / >
<
/React.StrictMode>,
document.getElementById('root')
);
.container {
height: 90vh;
margin: 2rem;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 3px;
}
.cell {
color: white;
font-size: 3rem;
text-align: center;
padding: 4rem;
}
.cell-1 {
background: deepskyblue;
grid-row-start: 1;
grid-row-end: 3;
}
.cell-2 {
background: orange;
}
.cell-3 {
background: royalblue;
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 3;
}
.cell-4 {
background: gold;
}
.cell-5 {
background: blueviolet;
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 5;
}
.cell-6 {
background: limegreen;
}
.cell-7 {
background: coral;
}
.cell-8 {
background: lightseagreen;
grid-row-start: 3;
grid-column-start: 1;
}
.cell-9 {
background: maroon;
grid-row-start: 3;
}
.cell-10 {
background: mediumaquamarine;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<body>
<div id="root"></div>
</body>
You can check the following Codepen here
I have added a width attribute along with grid-column-end. It will work without changing the html structure.
.cell-8 {
background: lightseagreen;
grid-row-start: 3;
grid-column-start: 1;
grid-column-end: 3;
width: 104.8%;
left: 0;
item-self: flex-end;
}
.cell-9 {
background: maroon;
width: 104.8%;
grid-column-start: 4;
grid-column-end: 6;
justify-self: flex-end;
}
Thanks
Just add grid-column-end in box 8 and 9.
.cell-8 {
background: lightseagreen;
grid-row-start: 3;
grid-column-start: 1;
grid-column-end: 4;
}
.cell-9 {
background: maroon;
grid-row-start: 3;
grid-column-start: 4;
grid-column-end: 6;
}
Updated:
.container {
height: 90vh;
margin: 2rem;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 3px;
}
.cell {
color: white;
font-size: 3rem;
text-align: center;
padding: 4rem;
}
.cell-1 {
background: deepskyblue;
grid-row-start: 1;
grid-row-end: 3;
}
.cell-2 {
background: orange;
}
.cell-3 {
background: royalblue;
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 3;
grid-column-end: 5;
}
.cell-4 {
background: gold;
}
.cell-5 {
background: blueviolet;
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 5;
}
.cell-6 {
background: limegreen;
}
.cell-7 {
background: coral;
}
.cell-8 {
background: lightseagreen;
grid-row-start: 3;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 3;
}
.cell-9 {
background: maroon;
grid-row-start: 3;
grid-column-start: 4;
grid-column-end: 7
}
.cell-10 {
background: mediumaquamarine;
grid-row-start: 3;
grid-column-start: 5;
grid-column-end: 6;
}
Another Solution
Separate box 8 and 9 to another div.
Check out here
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.