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>
Related
I'm trying to achieve the following layout:
Top bar
Main content placeholder
Bottom bar
The main content has (always one at the same time though) children, one of which is a table which should always be square.
How can I do this with CSS? I've tried flexbox and CSS grid including aspect-ratio but couldn't get it to work.
The idea is basically the following:
Top/Main content/Bottom is always the same height/full width
If there's a table inside the main content, it should be square. The main content placeholder should remain the size but the table within should always be automatically resized to be square (ideally with the minimum of available width or height)
To achieve this, it's okay for the top bar the change its height, the bottom bar should remain fixed
Here's some example code I've tried:
<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
.main {
background: gray;
height: 100vh;
grid-template-rows: 20% 60% 20%;
display: grid;
}
.top {
background: red;
}
.placeholder {
background: green;
width: 100%;
height: 100%;
position: relative;
}
.square-table {
background: yellow;
aspect-ratio: 1/1;
height: 100%;
position: absolute;
}
.bottom {
background: blue;
}
</style>
</head>
<body style="height: 100%;">
<div class="main">
<div class="top">Top</div>
<div class="placeholder">
<p>Generic placeholder</p>
<table class="square-table">
<tbody>
<tr>
<td>abc</td>
</tr>
</tbody>
</table>
</div>
<div class="bottom">Bottom</div>
</div>
</body>
</html>
Any help or pointers in the right direction would be much appreciated.
Grid children have min-height: auto set by default which means they will always resize based on the content. So you can set min-height: 100% on the .placeholder div. Then I set the placeholder div to also be a grid, and then the min-height fix on the table again -- see solution below
body { color: white; margin: 0; font-family: sans-serif; text-align: center }
.main { background: gray }
.top { background: red }
.placeholder { background: green }
.bottom { background: blue }
.square-table { background: yellow; color: black }
.main {
height: 100vh;
grid-template-rows: 20% 60% 20%;
display: grid;
}
.placeholder {
min-height: 100%;
grid-template-rows: fit-content(0) 1fr;
display: grid;
justify-content: center;
}
.square-table {
margin: auto;
max-height: 100%;
min-height: 100%;
aspect-ratio: 1/1;
}
<div class="main">
<div class="top">Top</div>
<div class="placeholder">
<div> <!-- if no intro just remove <p> tag and leave the <div> empty -->
<p>Generic placeholder</p>
</div>
<table class="square-table">
<tbody>
<tr>
<td>abc</td>
</tr>
</tbody>
</table>
</div>
<div class="bottom">Bottom</div>
</div>
I have five rows in a grid layout.
There is a header row at the top.
I want the content row to fill everything it can of the available space.
I want the footer row to be at the bottom.
Between the header, content and footer rows I have two rows which just adds height spacing at 15px.
Here is HTML-code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="body">
<div class="headerRow">
<div>Title</div>
<div>Fill</div>
<div>Image</div>
</div>
<div style="height: 15px;"></div>
<div>
content
</div>
<div style="height: 15px"></div>
<div class="footerRow">
<div>foo</div>
<div>bar</div>
</div>
</body>
</html>
Here is my CSS-code:
.body {
margin: 15px;
background: lime;
display: grid;
grid-template-rows: auto auto 1fr auto auto;
}
.headerRow {
display: grid;
grid-template-columns: auto 1fr auto;
background-color: #2196F3;
}
.footerRow {
display: grid;
grid-template-columns: auto auto;
background-color: red;
}
I got my "headerRow" to show three columns with the middle column to fill every available space with this line in the CSS:
grid-template-columns: auto 1fr auto;
So I tried this line in the .body-block in my CSS:
grid-template-rows: auto auto 1fr auto auto;
But that didn't work :'(
What is the problem?
Maybe like this:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
margin: 15px;
background: lime;
display: grid;
grid-row-gap: 15px;
align-content: space-between;
height: 100%;
}
.headerRow {
display: grid;
grid-template-columns: auto 1fr auto;
background-color: #2196F3;
justify-items: center;
}
.footerRow {
display: grid;
grid-template-columns: auto auto;
background-color: red;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en">
<div class="container">
<head>
<title>App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="body">
<div class="headerRow">
<div>Title</div>
<div>Fill</div>
<div>Image</div>
</div>
<div>
content
</div>
<div class="footerRow">
<div>foo</div>
<div>bar</div>
</div>
</div>
</body>
</html>
Why not use hr tag for adding space instead of another rows. Also if you want to make the three columns inside headerRow, Try adding float : left or adding columns from bootstrap would solve your problem.
I have some follow up questions after trying #Nikola Pavicevic solution:
Question 1:
In the html, body CSS-block the height: 100% seems to do the trick for me.But it makes the page in my web browser to have a vertical scrollbar.This scrollbar seems to be needed to show the "footer"-row.Is there anyway to decrease the height of the content row so the header row and footer row is always displayed?
Question 2:
The "content-row" seems to not fill all space available in the page.
I can see this by putting a background in the "content-row".
Is there a way to make sure the "content-row" fills all available space?
But keeps the "header-row" and "footer-row" visible.
Updated HTML:
<!DOCTYPE html>
<html lang="en">
<div class="container">
<head>
<title>App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="body">
<div class="headerRow">
<div>Title</div>
<div>Fill</div>
<div>Image</div>
</div>
<div class="spacerRow"></div>
<div class="contentRow">
content
</div>
<div class="spacerRow"></div>
<div class="footerRow">
<div>foo</div>
<div>bar</div>
</div>
</div>
</body>
</html>
Updated CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
margin: 15px;
background: lime;
display: grid;
align-content: space-between;
height: 100%;
}
.headerRow {
display: grid;
grid-template-columns: auto 1fr auto;
background-color: #2196F3;
justify-items: center;
}
.footerRow {
display: grid;
grid-template-columns: auto auto;
background-color: red;
justify-content: space-between;
}
.spacerRow {
height: 15px;
background-color: yellow;
}
.contentRow {
background-color: purple;
}
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 2 years ago.
like the picture above. How can I make the most right side column to occupy the row below with the grid system using col-lg-6. The first and second column would be col-lg-6 and the column below would be col-lg-6 too. I am using float right for the very right side column to make something work. But can I make the column like this using display:relative;?
Using grid-areas there is a easy way. Try this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.parentDiv{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "firstdiv thirddiv" "seconddiv thirddiv";
grid-gap: 10px;
}
.firstdiv{
grid-area: firstdiv;
background: black;
width: 100%;
height: 100px;
}
.seconddiv{
grid-area: seconddiv;
background: green;
width: 100%;
height: 100px;
}
.thirddiv{
grid-area: thirddiv;
background: red;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="parentDiv">
<div class="firstdiv">
</div>
<div class="seconddiv">
</div>
<div class="thirddiv">
</div>
</div>
</body>
</html>
I am trying to combine CSS grid with position in order to have my page effectively adjust to different screen sizes. My thinking is to have one grid design for mobile and one for desktop using #media(screen-width).
My thinking would be to have the grid blocks be driven by grids and have the content in the grid blocks be driven by position.
Now my understanding is that grid would create a imaginary rectangle based on the columns and rows and that when i use position that it would latch on to the one corner of the grid block.
Question
01 Where is my misunderstanding of this concept?
02 Are there better ways to do this?
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Grid</title>
<style>
.wrapper_main {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 1em;
justify-items: stretch;
align-items: stretch;
}
.box0 {
grid-column: 1/6;
grid-row: 1;
border: 1px solid #333;
}
.box1 {
grid-column: 1/6;
grid-row: 2/6;
border: 1px solid #333;
}
.seconds01 {
position: fixed;
right: 20px;
top: 50px;
}
.seconds05 {
position: fixed;
right: 100px;
top: 50px;
}
</style>
</head>
<body>
<div class="wrapper_main">
<div class="box box0">Box 0</div>
<div class="box box1">
<a class="seconds01"><img src="img/Candle_Box_Tag.png"></a>
<a class="seconds05"><img src="img/Candle_Box_Tag.png"></a>
</div>
</div>
</body>
</html>
What i'm getting.
What i want.
Be aware when you positioning the element. When you apply position:fixed; its won't respect it parent containers it will strictly stick to the viewport's view.
Perhaps you can try with position:absolute; to the child element and give position:relative; to its parent container so that it will be in its parent container
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Grid</title>
<style>
.wrapper_main{
display:grid;
grid-template-columns:repeat(5, 1fr);
grid-auto-rows:minmax(100px, auto);
grid-gap:1em;
justify-items:stretch;
align-items:stretch;
}
.box0{
grid-column:1/6;
grid-row:1;
border:1px solid #333;
}
.box1{
grid-column:1/6;
grid-row:2/6;
border:1px solid #333;
position:relative;
}
.seconds01{
position:absolute;
right:20px;
top:50px;
}
.seconds05{
position:absolute;
right:100px;
top:50px;
}
</style>
</head>
<body>
<div class="wrapper_main">
<div class="box box0">Box 0</div>
<div class="box box1">
<a class="seconds01"><img src="img/Candle_Box_Tag.png"></a>
<a class="seconds05"><img src="img/Candle_Box_Tag.png"></a>
</div>
</div>
</body>
</html>
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>