assume I try to get almost similar kind of result.
So i write this code to get this this kind of box . But the code is not complete Please see my code ,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<style>
.row{
width:90%;
margin-left:5%;
margin-right:5%;
}
.hig-co{
width:66.6677% !important;
max-width:66.667% !important;
min-width:66.667% !important;
}
.sm-co{
width:33.333% !important;
max-width:33.333% !important;
min-width:33.333% !important;
}
.hig-all{
width:95%;
}
</style>
<div class="container">
<div class="row">
<div class="all">
<div class="hig-co">
<div class="hig-all">
<img src="#" />
</div>
<div class="hig-all">
<div class="col-md-4 col-sm-4">
<img src="#">
</div>
<div class="sm-co">
<img src="#">
</div>
</div>
</div>
<div class="col-md-3 col-sm-12 sm-co">
<div class="col-md-12 col-sm-12"><img src="#"></div>
<div class="col-md-12 col-sm-12"><img src="#"></div>
<div class="col-md-12 col-sm-12"><img src="#"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Please help to complete this .
Here I have to make almost same kind of result. So Please help to make this kind of structure using css . Please not i will display this layout only if screen size min width is 766px. If the screen size less than 766px i will hide this layout using media query . After making this layout i will insert images to this layout . So images need automatically fit in this layout .
Here is a simple solution using Flexbox where you can easily adjust the different sizes:
body {
margin: 0;
}
* {
box-sizing:border-box;
}
div {
border:1px solid #fff;
}
.container {
display: flex;
height: 100vh;
}
.left {
flex: 3;
display:flex;
flex-wrap:wrap;
}
.left > div:nth-child(1) {
width:100%;
height:40%;
background:red;
}
.left > div:nth-child(2) {
width:33%;
height:60%;
background:red;
}
.left > div:nth-child(3) {
flex:1;
background:blue;
}
.right {
flex: 2;
display: flex;
flex-direction: column;
}
.right > div:nth-child(1),.right > div:nth-child(3) {
height:25%;
background:red;
}
.right > div:nth-child(2) {
flex:1;
background:blue;
}
<div class="container">
<div class="left">
<div></div>
<div></div>
<div></div>
</div>
<div class="right">
<div></div>
<div></div>
<div></div>
</div>
</div>
I have a great solution with CSS Grids..
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Grid Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="container">
<section>
<header>
<img src="demo.jpg" alt="">
</header>
<div class="left-left">
<img src="demo.jpeg" alt="">
</div>
<div class="left-right">
<img src="demo.jpg" alt="">
</div>
</section>
<aside>
<div class="right-top">
<img src="demo.jpeg" alt="">
</div>
<div class="right-middle">
<img src="demo.jpeg" alt="">
</div>
<div class="right-bottom">
<img src="demo.jpeg" alt="">
</div>
</aside>
</div>
</body>
</html>
CSS:
.container {
display: grid;
grid-template-columns: 66.667% 33.333%;
grid-template-areas:
"section aside";
}
section {
grid-area: section;
display: grid;
grid-template-columns: 42% 58%;
grid-template-rows: 281px 501px;
grid-template-areas:
"header header"
"left-left left-right"
}
header {
grid-area: header;
}
.left-left {
grid-area: left-left;
}
.left-right {
grid-area: left-right;
}
aside {
grid-area: aside;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 150px 480px 1fr;
grid-template-areas:
"right-top"
"right-middle"
"right-bottom";
}
.right-top {
grid-area: right-top;
}
.right-middle {
grid-area: right-middle;
}
.right-bottom {
grid-area: right-bottom;
}
img {
width: 100%;
height: 100%;
}
I'm not entirely sure what you meant with "And the thin if our screen size less than this 756 then we will hide this and the maximum width of the container is 1180 px." but a simple media query would definitely do the trick here.
Related
I used CSS Grid to create this, it is part of my website project but When I am resizing my browser window , it looks like the images of the shirt stop enlarging from a specific point , but when I shrink the browser windows everything works fine.I am very new to this and I already searched online but I could not figure it out.
I would appreciate any help
.section {
height: 100%;
width: 100%;
display: block;
}
.section.one {
background-color: rgb(6, 65, 65);
}
.grid-container {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
grid-column-gap: 1%;
max-width: 70%;
margin-top: 20%;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
}
.grid-container>div {
display: grid;
place-items: center;
}
.grid-container>div>.shirt {
grid-area: 1/1;
transition: .5s;
transform-origin: center;
display: grid;
justify-items: center;
}
.grid-container>div>.art {
grid-area: 1/1;
transition: .5s;
transform-origin: center;
display: grid;
justify-items: center;
}
.grid-container>div>.shirt>.slideup {
max-width: 100%;
/* controls the width of the shirt images */
}
.grid-container>div>.art>.scale {
max-width: 50%;
margin-top: -20%;
margin-right: 5%
/* controls the width of the art images */
}
.grid-container div:hover .shirt {
transform: scale(0);
}
.grid-container div:hover .art {
transform: scale(2);
transform-origin: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.11/fullpage.min.css" integrity="sha512-NGRhMiWY9pf5z8PLens7/u+LLwIPAu1dhJ7u9sHRWIo8TKrVbKiWlRdYRH3pVDCZA10zmobo+PBLGeLOREklBw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>
<body>
<div class="grid-container ">
<div>
<div class="shirt">
<img src="https://i.imgur.com/oS8QWPI.png" class="slideup" data-delay=".4s">
</div>
<div class="art">
<img src="https://i.imgur.com/jeNzULX.png" class="scale" data-delay="1s">
</div>
</div>
<div>
<div class="shirt">
<img src="https://i.imgur.com/oS8QWPI.png" class="slideup" data-delay=".6s">
</div>
<div class="art">
<img src="https://i.imgur.com/jeNzULX.png" class="scale" data-delay="1.2s">
</div>
</div>
<div>
<div class="shirt">
<img src="https://i.imgur.com/oS8QWPI.png" class="slideup" data-delay=".8s">
</div>
<div class="art">
<img src="https://i.imgur.com/jeNzULX.png" class="scale" data-delay="1.4s">
</div>
</div>
</div>
</body>
It looks like the shirt img doesn't fully cover the size of the grid area, which allows the other image to further scale (if that makes sense.. maybe you see what I mean when you inspect the elements in your browser).
You can fix this by adding {width: 100%} to .grid-container>div, .grid-container>div>.shirt and .grid-container>div>.shirt>.slideup. This makes sure the img is the size of the grid, in this case it makes the img larger. If you liked the smaller shirts better, you should increase your grid-column-gap on the .grid-container.
Your png file which contains the shirt is only 300x352px large. It won't get larger than this with the methods you use. Use a larger image file to avoid this.
I'm making a responsive photo gallery using CSS grid. Everything is mostly fine until you stretch the browser width to above 1240px. One image should take up the space of four images but as the browser gets really big the image doesn't take up all the space that I want it to. I think it's because the original size of the image is 800x600. Any help would be greatly appreciated.
I'm doing the project on CodePen if you would like to see it: https://codepen.io/Zakkku/pen/JjrPPGo
<style>
.gallery {
display: flex;
flex-direction: column;
gap: 10px;
}
img {
max-width: 100%;
height: auto;
width: auto;
object-fit: fill;
}
#media screen and (min-width: 768px) {
.gallery {
display: grid;
grid-template-columns: auto auto;
}
}
#media screen and (min-width: 1024px) {
.gallery {
display: grid;
grid-template-columns: auto auto auto;
}
.noods {
grid-area: 1 / 2 / 3 / 4;
object-fit: fill;
}
}
</style>
<body>
<div class="gallery">
<div class="pic">
<img src="https://images.unsplash.com/photo-1477925518023-22b33cbd802c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc1MzY&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Figs" width="800" height="600">
</div>
<div class="pic noods"><img src="https://images.unsplash.com/photo-1462618521524-07d259ab774a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc2NTU&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Noodles"></div>
<div class="pic"><img src="https://images.unsplash.com/44/Y51aFguqRcGTgsYRYBXV_20140104_085932.jpg?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc3NDA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Razzberries"></div>
<div class="pic"><img src="https://images.unsplash.com/24/Tea-Time.png?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc4NTc&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Green Tea"></div>
<div class="pic"><img src="https://images.unsplash.com/photo-1471193945509-9ad0617afabf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0NzkwMg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Veggies"></div>
<div class="pic"><img src="https://images.unsplash.com/photo-1433155805822-ffc337821a5b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0Nzk0Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Brilliant Buffet"></div>
<div class="pic"><img src="https://images.unsplash.com/photo-1470162656305-6f429ba817bf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0Nzk4Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="More Green Tea"></div>
<div class="pic"><img src="https://images.unsplash.com/photo-1443131307017-4097c8ac7763?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0ODI3Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="lemonade"></div>
<div class="pic"><img src="https://images.unsplash.com/photo-1474152042542-1e794677a34b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0ODM1NA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Grapes"></div>
</div>
</body>
</html>```
Per Sujan Sundareswaran here is a working example.
.gallery {
display: flex;
flex-direction: column;
gap: 10px;
}
img {
max-width: 100%;
height: auto;
width: auto;
object-fit: fill;
}
#media screen and (min-width: 768px) {
.gallery {
display: grid;
grid-template-columns: auto auto;
}
}
#media screen and (min-width: 1024px) {
.gallery {
display: grid;
grid-template-columns: auto auto auto;
}
.noods {
grid-area: 1 / 2 / 3 / 4;
object-fit: fill;
background-image: url("https://images.unsplash.com/photo-1462618521524-07d259ab774a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc2NTU&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800");
background-size: cover;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
</head>
<body>
<div class="gallery">
<div class="pic">
<img
src="https://images.unsplash.com/photo-1477925518023-22b33cbd802c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc1MzY&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="Figs" width="800" height="600">
</div>
<div class="pic noods"></div>
<div class="pic"><img
src="https://images.unsplash.com/44/Y51aFguqRcGTgsYRYBXV_20140104_085932.jpg?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc3NDA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="Razzberries"></div>
<div class="pic"><img
src="https://images.unsplash.com/24/Tea-Time.png?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc4NTc&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="Green Tea"></div>
<div class="pic"><img
src="https://images.unsplash.com/photo-1471193945509-9ad0617afabf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0NzkwMg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="Veggies"></div>
<div class="pic"><img
src="https://images.unsplash.com/photo-1433155805822-ffc337821a5b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0Nzk0Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="Brilliant Buffet"></div>
<div class="pic"><img
src="https://images.unsplash.com/photo-1470162656305-6f429ba817bf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0Nzk4Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="More Green Tea"></div>
<div class="pic"><img
src="https://images.unsplash.com/photo-1443131307017-4097c8ac7763?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0ODI3Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="lemonade"></div>
<div class="pic"><img
src="https://images.unsplash.com/photo-1474152042542-1e794677a34b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0ODM1NA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="Grapes"></div>
</div>
</body>
</html>
it's working, only check below and work great. no need to more
img {
max-width: 100%;
height: auto;
width: 100%;
object-fit: fill;
}
with Bootstrap and its layout system is it possible to have rows in columns to produce this type of result :
I tried this but without success :
<div className="col-lg-3 col-12">
<div className="row">
<displaySquare />
</div>
<div className="row">
<displaySquare />
</div>
<div className="row">
<displaySquare />
</div>
</div>
<div className="col-lg-9 col-12">
<div className="row">
<displayBigSquare />
</div>
<div className="row">
<displaySquare />
<displaySquare />
</div>
</div>
ty
UPDATE (23/08/2021):
it's actually better with grid. I dropped bootstrap and I use GRID instead which allows to define all the properties related to CSS grids (GRID explanations on https://developer.mozilla.org/fr/docs/Web/CSS/grid).
HTML code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Griiiiid!</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1 class="centre">Welcome</h1>
<div class="container">
<div class="items item1">1</div>
<div class="items item2">2</div>
<div class="items item3">3</div>
<div class="items item4">4</div>
<div class="items item5">5</div>
<div class="items item6">6</div>
</div>
</body>
</html>
CSS code:
*,
::before,
::after {
box-sizing: border-box;
}
body {
background-color: #333;
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
}
h1 {
color: salmon;
}
.centre {
text-align: center;
}
.container {
padding: 30px ;
width: 100%;
background-color: #eee;
margin: 30px auto;
display: grid;
grid-template-rows: 150px;
grid-template-columns: repeat (3, 150px);
grid-auto-rows: 150px;
gap: 30px;
}
.items {
padding: 20px;
font-size: 30px;
font-family: sans-serif;
}
.item1 {
background-color: lightcoral;
}
.item2 {
grid-row: 1/3;
grid-column: 2/4;
background-color: lightgreen;
}
.item3 {
background-color: lime;
}
.item4 {
background-color: chocolate;
}
.item5 {
background-color: darkgoldenrod;
}
.item6 {
background-color: darkseagreen;
}
Result:
As of Bootstrap v5.0.2, the answer is no. The issue is that in order to have the orange rectangle in your example span multiple "rows", you need to use CSS Grid styling, and that is not yet part of Bootstrap.
However, very soon in v5.1.0, they are including an opt-in option to replace the flexbox-based grid system they currently use with a CSS Grid-based one instead. It will probably have some growing pains, and I'm not sure that they have support for doing what you're trying to do here just yet, but at least CSS Grid will be there to try out. There will be documentation added for how to enable the option and how to use it once that version goes live, but you can read through the feature's PR in the meantime.
If you are wanting that exact layout, then you would have to do it in two rows:
The margin bottom of the square need to equal double your gutter
.square {
width: 100%;
padding-top: 100%;
background: orange;
margin-bottom: 30px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-4">
<div class="square"></div>
<div class="square"></div>
</div>
<div class="col-8">
<div class="square"></div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="square"></div>
</div>
<div class="col-4">
<div class="square"></div>
</div>
<div class="col-4">
<div class="square"></div>
</div>
</div>
</div>
I am developing a web app for Android. Playing around with CSS grid I want two ‘Views’ on for landscape and one for portrait. The layout mainly consists of a Product display and a menu (with mostly buttons). In portrait mode the menu should be displayed under the product (which is working fine). The problem is that there is a massive withspace at the left in the grid holding the product and menu divs. I also would like the grid to wrap around the product. I use a server so load the product into the wrapper div.
The wanted behaviour for portrait would be that the product and menu are aligned to the left and their width adjusted to the width of the product.
.hide {
display: none;
}
#media only screen and (orientation: portrait) {
.grid {
display: grid;
grid-template-rows: [wrapper] auto [menu] auto;
}
}
#media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
.grid {
display: grid;
grid-template-columns: [wrapper] auto [menu] auto 1fr;
}
.menu{
grid-area: menu;
border-style: solid;
display:grid;
grid-template-rows: repeat(auto);
}
}
.product {
display: inline-grid;
grid-template-columns: auto auto;
grid-template-rows: repeat(6,[row] auto);
padding: 5px;
}
.wrapper{
grid-area: wrapper;
border-style: solid;
}
.menu{
grid-area: menu;
border-style: solid;
}
<!DOCTYPE html>
<html>
<head>
<title>test CSS Grid</title>
<link media="all" type="text/css" rel="stylesheet" href="product.css">
<script src = "jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="productScript.js"></script>
<div class="hide">
<div id="product" class="product">
<div><u>Pos: </u></div><div class="Pos">test1</div>
<div><u>Artikel: </u></div><div class="Artikel">test2</div>
<div><u>Menge: </u></div><input class="Menge" type="text" />
<div><u>Lagerplatz: </u></div><div class="Lagerplatz">test6</div>
<div><u>Bezeichnung: </u></div><div class="Bezeichnung">test3</div>
</div>
</div>
</head>
<body>
<div class="grid">
<div id="wrapper" class="wrapper">
</div>
<div class="menu">
<button type="button" onclick="mockConfirm()"> barcode</button>
<button type="button" onclick="cancelPicklist()"> cancel</button>
</div>
</div>
</body>
</html>
Thanks for your time.
If I understand correctly, you need to use display:inline-grid instead and you only need two columns in the product div.
.product {
display: inline-grid;
grid-template-columns: auto auto;
background: lightgreen;
}
.grid {
margin: 1em;
display: inline-grid;
background: pink;
border: 1px solid grey;
}
<div class="grid">
<div id="wrapper" class="wrapper">
<div id="product" class="product">
<div><u>Pos: </u></div>
<div class="Pos">test1</div>
<div><u>Artikel: </u></div>
<div class="Artikel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
<div><u>Menge: </u></div><input class="Menge" type="text" />
<div><u>Lagerplatz: </u></div>
<div class="Lagerplatz">test6</div>
<div><u>Bezeichnung: </u></div>
<div class="Bezeichnung">Lorem ipsum dolor sit amet.</div>
</div>
</div>
<div class="menu">
<button type="button" onclick="mockConfirm()"> barcode</button>
<button type="button" onclick="cancelPicklist()"> cancel</button>
</div>
</div>
Working on a CSS Grid example that contains several photo cards (items). Let's imagine that these items are created dynamically by any server-side logic.
The last item in the grid container is a div element defined as a footer for that grid, which also contains a button that has to be center-aligned inside its parent.
By the grid definition, the footer takes the height of the implicit row: 200px. The footer element spans the 2 columns of the grid.
How can the footer, being in the last implicit row, have a smaller size than the grid-auto-rows property, defined on the grid container?
.travel-photos {
margin: 0 auto;
width: 80%;
background: lightblue;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px;
grid-auto-rows: 200px;
grid-gap: 20px 10px;
}
.travel-photos h1 {
text-align: center;
grid-column: 1 / 3;
}
.photo-card>img {
width: 100%;
height: 100%;
background-color: cyan;
}
.photos-footer {
background-color: lightgreen;
grid-column: 1 / 3;
}
<section class="travel-photos">
<h1>PHOTOS</h1>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photos-footer">
<button>MORE</button>
</div>
</section>
The grid-auto-rows property only accepts track sizes as values. It does not accept any form of syntax that would allow you to target a particular row.
Therefore, another method is needed to size the grid item appearing in the last implicit row.
Here's a simple solution: Target the last item directly.
.photos-footer {
height: 50px;
}
And then, because you want the content of that item (the button) centered, use flexbox:
.photos-footer {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
Here's the full code:
.travel-photos {
margin: 0 auto;
width: 80%;
background: lightblue;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px;
grid-auto-rows: 200px;
grid-gap: 20px 10px;
}
.travel-photos h1 {
text-align: center;
grid-column: 1 / 3;
}
.photo-card > img {
width: 100%;
height: 100%;
background-color: cyan;
}
.photos-footer {
height: 50px;
align-self: end; /* align item to bottom of row */
display: flex;
justify-content: center;
align-items: center;
grid-column: 1 / 3;
background-color: lightgreen;
}
<section class="travel-photos">
<h1>PHOTOS</h1>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photos-footer">
<button>MORE</button>
</div>
</section>
NOTE that this solution doesn't actually change the height of the last grid row, which remains at 200px, per the grid-auto-rows rule. This solution changes only the height of the grid item inside the last row. That's why there's a gap between the penultimate row and the grid item pinned to the bottom of the last row.
If the last row itself must have a different height, then I would suggest removing it from the grid container and placing it underneath as a new element.
NOTE also that the problem raised in the question applies only in the implicit grid. In the explicit grid, defining the height of the last row (or any row, for that matter) is simple and easy.
Maybe using grid-auto-rows: min-content; is fine here . grid-template-rows:50px; will only set first row's height.
height or max-height could be used on .photo-card if necessary.
.travel-photos {
margin: 0 auto;
width: 80%;
background: lightblue;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px;
grid-auto-rows: min-content;
grid-gap: 20px 10px;
}
.travel-photos h1 {
text-align: center;
grid-column: 1 / 3;
}
.photo-card>img {
width: 100%;
height: 100%;
background-color: cyan;
}
.photos-footer {
background-color: lightgreen;
grid-column: 1 / 3;
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
</head>
<body>
<section class="travel-photos">
<h1>PHOTOS</h1>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photos-footer">
<button>MORE</button>
</div>
</section>
</body>
</html>