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
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>
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 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 am using a css grid. Columns and rows of this grid are set to "auto". Each cell in the grid contains (among other things) an image that determines the dimensions.
The grid looks like this:
The problem is: when I reduce the screen size, the ratio of the grid cells is not maintained. It seems like the leftmost column is shrunk first:
This leads to ugly wholes in the grid. How can I ensure that the grid is growing and shrinking consistently while ideally keeping the images determining the appearance?
Here is a simple version of the grid CSS with an accompanying fiddle.
.grid {
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto auto;
display: grid;
position: relative;
grid-gap: 12px 12px;
}
.element_1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;
}
.element_2 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 4;
}
.element_3 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 5;
}
.element_4 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: 5;
}
.img-responsive {
width: 100%;
height: auto;
}
Here is solution, your css file
.grid {
display: grid;
}
.grid > div img {
display:inline-block;
vertical-align:middle;
}
.element_1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;
}
.element_1 img {
padding-top:0;
padding-left:0;
}
.element_2 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 4;
}
.element_2 img {
padding-top:0;
padding-right:0;
}
.element_3 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 5;
}
.element_3 img {
padding-bottom:0;
padding-left:0;
}
.element_4 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: 5;
}
.element_4 img {
padding-bottom:0;
padding-right:0;
}
.img-responsive {
box-sizing:border-box;
padding:6px;
width: 100%;
height: auto;
}
#media screen and (max-width:480px) {
.img-responsive {
padding:3px;
}
}
you can see running example & play with source code here jsbin