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>
Related
I am trying to create a responsive grid of thumbnails for a project.
However no matter how I try to tweak it I never end up with quite what I wish for.
I've tried grid/flex/minmax/auto-fit/auto-fill and even old style css to achieve this.
The important part for me is to keep the thumbnail container at 180x300px or similar ratio when responsive. I've seen some websites using this aspect ratio approach to make the thumbnails smaller and closer to each other if the window gets resized.
Not sure how this technique is called therefor I am not able to search for it.
The thumbnails are spanning over the entire with of their parent container, in this case a 100% wide container
Here's some code I am left with at this point in time.
.container {
display: flex;
flex-wrap: wrap
}
.container,.entry {
margin: 10px 5px 10px 5px;
height: 300px;
width: 180px;
background: red;
}
<div class="container">
<div class="entry" id="1"></div>
<div class="entry" id="2"></div>
<div class="entry" id="3"></div>
<div class="entry" id="4"></div>
<div class="entry" id="5"></div>
<div class="entry" id="6"></div>
<div class="entry" id="7"></div>
<div class="entry" id="8"></div>
<div class="entry" id="9"></div>
<div class="entry" id="10"></div>
</div>
Thanks for your help! :)
I'm hoping I am understanding correctly. This should maintain aspect of 180x300 and create a grid down to 600px breakpoint at which point a media query switches from grid to flex.
.container {
display: flex;
flex-wrap: wrap;
background: black;
display: flex;
flex-direction: column;
padding: 48px;
align-items: center;
}
#media only screen and (min-width: 600px) {
.container {
background: black;
grid-column: 1 / -1;
grid-gap: 12px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
align-content: space-evenly;
}
}
.entry {
width: 180px;
height: 300px;
/* width: 100%; */
background: red;
margin: 6px 12px;
justify-content: center;
}
#media only screen and (min-width: 600px) {
.entry {
width: 180px;
height: 300px;
background: blue;
}
}
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<body>
<div class="container">
<div class="entry" id="1"></div>
<div class="entry" id="2"></div>
<div class="entry" id="3"></div>
<div class="entry" id="4"></div>
<div class="entry" id="5"></div>
<div class="entry" id="6"></div>
<div class="entry" id="7"></div>
<div class="entry" id="8"></div>
<div class="entry" id="9"></div>
<div class="entry" id="10"></div>
</div>
</body>
</html>
I'm trying to make a grid with items/pizza toppings to order, and I would like an "Add to cart" button under each item in the grid. How would I go about doing that?
So far I've tried simply putting a button with a line break under an element but as assumed, that didn't work.
Here is the relevant code I have in the body:
.wrapper {
width: 90%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: 200px;
grid-row-gap: 30px;
grid-column-gap: 10px;
}
.item {
background: firebrick;
color: white;
padding: 10px;
}
.item:nth-child(even) {
background: rgb(139, 19, 19);
}
.add {
margin-bottom: 100px;
}
button {
margin-bottom: 100px;
}
#container {
background-color: maroon;
width: 1500px;
height: 1200px;
margin-left: auto;
margin-right: auto;
border-color: black;
border-width: 10px;
border-style: double;
}
<div id="container">
<div id="header">
<h1> Pizza Planet </h1>
<script src="index.js"></script>
</div>
<div id="content">
<h2>Select your items:</h2>
<div class="wrapper">
<div class="item">1</div>
<div class="add"><button>Add To Cart</button></div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</div>
</div>
All that does is make a huge gap for another cell on the grid with a tiny add to cart button on there. Any help would be appreciated, thank you.
One approach might be to use CSS grid to achieve what you require. A simple grid layout for what you describe above could be done like this:
.item img {
width:100%;
/* Causes the button to sit below the img */
display:block;
}
.item button {
width:100%;
}
.grid {
/* Specifies css grid to be used */
display:grid;
/* Specifies the number of columns and sizes in the grid */
grid-template-columns: 1fr 1fr;
/* Specifies spacing between grid cells */
grid-gap:1rem;
}
<div class="grid">
<div class="item">
<img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />
<button>Order</button>
</div>
<div class="item">
<img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />
<button>Order</button>
</div>
<div class="item">
<img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />
<button>Order</button>
</div>
<div class="item">
<img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />
<button>Order</button>
</div>
</div>
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 3 years ago.
Im making a grid layout and im getting these white lines around my screen. I do not have any grid gaps or anything in my code. Its also only around the sides of my screen. Is it because the header/sidebar is in the wrapper? Then how will I make the sidebar stick to the side of the screen. Im new to grid so i'm not sure how to make the sidebar keep to the side..
<!DOCTYPE html>
<html>
<head>
<title>CSS Grids</title>
<style>
html {
background-color: rgb(41, 81, 134);
height: 100%;
}
body {
height: 100%;
}
.wrapper{
height: 100vh;
width:100vh;
display:grid;
grid-template-columns:1r 5fr;
grid-template-rows: 1fr;
grid-template-areas:
"header slideshow"
}
.header {
grid-area: header;
background-color: #e0c5cf;
width: 30%;
}
.slideshow {
grid-area: slideshow;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
SOME TEXT Lorem ipsum dolor sit amet,
<div="text">
</div>
<div class="slideshow">
</div>
</div>
</body>
</html>
You need to add margin: 0 to your body element.
<!DOCTYPE html>
<html>
<head>
<title>CSS Grids</title>
<style>
html {
background-color: rgb(41, 81, 134);
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.wrapper{
height: 100vh;
width:100vh;
display:grid;
grid-template-columns:1r 5fr;
grid-template-rows: 1fr;
grid-template-areas:
"header slideshow"
}
.header {
grid-area: header;
background-color: #e0c5cf;
width: 30%;
}
.slideshow {
grid-area: slideshow;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
SOME TEXT Lorem ipsum dolor sit amet,
<div="text">
</div>
<div class="slideshow">
</div>
</div>
</body>
</html>
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.
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>