Shrink columns of CSS grid at the same rate - html

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

Related

How can I make my grid layout sections to span 4 columns each?

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%;

How do I add an h1 element to a grid cell so that the h1 does not overlap

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>

From 2 grids in line, to 2 grids below each other (responsiveness)

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

How would I make one container in a grid change to 100% width on mobile?

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;
}
}

How can I expand my grid-column-start to grid-column-end to take exactly half of the current grid size

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