I am trying to let divs be inline, but grid-auto-columns does not make auto columns.
* {
margin: 0;
}
html,
body {
width: 100%;
}
#container {
width: 100%;
display: grid;
grid-auto-columns: 12vh;
grid-template-rows: 12vh;
justify-content: space-evenly;
}
#container div {
width: 100%;
height: 100%;
border: 1px solid black;
font-size: 4vh;
font-family: "Bebas Neue Regular";
}
<div id="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
I used grid-template-rows and grid-auto-columns, and I expected the each div to follow right behind the previous one as square. However, they were compressed for some reason.
I could make it with grid-template-columns: 12vh 12vh 12vh 12vh;, but I want to do it with grid-auto-columns because the number of boxes can be changed as the number of contents changes.
How can I do this and why does this happen?
Thank you.
* {
margin: 0;
}
html,
body {
width: 100%;
}
#container {
width: 100%;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 12vh;
grid-template-rows: 12vh;
justify-content: space-evenly;
}
#container div {
width: 100%;
height: 100%;
border: 1px solid black;
font-size: 4vh;
font-family: "Bebas Neue Regular";
}
<div id="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Related
I got 2 columns grid with following layout:
My issue is that when I use images inside the right column (1 image inside each box)..Images overflow and whole grid kind of acts weird.
It looks something like this:
Codepen Link: https://codepen.io/kazmi066/pen/MWXGgaL?editors=1100
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.grid {
background: green;
width: 100%;
max-height: 70vh;
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.col1 {
height: 100%;
background: red;
}
.col2 {
height: 100%;
background: orange;
}
.box1 {
width: 100%;
height: 50%;
border: 1px solid black;
}
.box2 {
width: 100%;
height: 50%;
border: 1px solid blue;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="grid">
<div class="col1"></div>
<div class="col2">
<div class="box1"><img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8N3x8fGVufDB8fHx8&w=1000&q=80" alt="property"/></div>
<div class="box2"><img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8N3x8fGVufDB8fHx8&w=1000&q=80" alt="property" /></div>
</div>
</div>
I want the images to adjust inside the boxes perfectly without the need of custom height and width so that any size of image can work in this scenario.
fit would be object-fit: contain; for the image not cover.
but if the ratio of the image is not the ratio of the box, you'll have blank
you can put the image in background of box1, box2... with a background size cover. It will cover entirely and clipped the overflow. If box ratio "totally" different of the image, lot of image can be clipped, but it's not so often.
I've found a way, only CSS, nothing is changed in your HTML
2 points:
1- it's using clip-path
2- image fill box space, but are clipped otherwise blank space
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.grid {
background: green;
width: 100%;
max-height: 70vh;
display: grid;
gap: 2vh;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
grid-template-rows: 100%;
}
.col1 {
background: red;
}
.col2 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 34vh 34vh;
background: orange;
justify-content: center;
}
.box1 {
width: 100%;
border: 1px solid black;
clip-path: inset(0);
}
.box2 {
width: 100%;
border: 1px solid blue;
clip-path: inset(0);
}
img {
width: 100%;
object-fit: contain;
}
<div class="grid">
<div class="col1"></div>
<div class="col2">
<div class="box1"><img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8N3x8fGVufDB8fHx8&w=1000&q=80" alt="property" /></div>
<div class="box2"><img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8N3x8fGVufDB8fHx8&w=1000&q=80" alt="property" /></div>
</div>
</div>
based on your grid max-height in vh, I defined all others same kind of values in vh. Lot more consistent and avoid some little strange pixels or lines here or there depending of window size.
I put a nested grid inside col2 where box1 box2 go. box have a clip-path with inset 0, meaning clipping everything out.
The solution that worked for me:
I used grid-auto-rows to create 2 rows with specific height.
Then added span to adjust the column accordingly to cover both rows.
.grid {
width: 100%;
border: 1px solid red;
display: grid;
gap: 14px;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 280px 280px;
}
.col1 {
height: 100%;
grid-column: 1/8;
grid-row: span 2;
background: red;
}
.col2 {
grid-column: 8/13;
height: 100%;
background: orange;
}
.col2 img:first-child {
margin-bottom: 11px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
#media (max-width: 768px) {
.grid {
grid-auto-rows: 220px 120px;
}
.col1 {
grid-column: 1/13;
}
.col2 {
grid-column: 1/13;
grid-row: span 2;
}
}
<div class="grid">
<div class="col1">
<img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8N3x8fGVufDB8fHx8&w=1000&q=80" alt="property"/>
</div>
<div class="col2">
<img src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YmVhdXRpZnVsJTIwaG91c2V8ZW58MHx8MHx8&w=1000&q=80" alt="property"/>
<img src="https://images.pexels.com/photos/186077/pexels-photo-186077.jpeg?cs=srgb&dl=pexels-binyamin-mellish-186077.jpg&fm=jpg" alt="property" />
</div>
</div>
Final output now:
Solution-2: Found Another better solution with Grid-template-areas I guess which looks more cleaner:
.grid {
width: 100%;
border: 1px solid red;
display: grid;
gap: 14px;
grid-template-areas:
"mainImage mainImage otherImage1"
"mainImage mainImage otherImage1"
"mainImage mainImage otherImage2"
"mainImage mainImage otherImage2"
}
.mainImage {
grid-area: mainImage;
}
.otherImage1 {
grid-area: otherImage1;
}
.otherImage2 {
grid-area: otherImage2;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="grid">
<img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8N3x8fGVufDB8fHx8&w=1000&q=80" alt="property" class="mainImage" />
<img src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YmVhdXRpZnVsJTIwaG91c2V8ZW58MHx8MHx8&w=1000&q=80" alt="property" class="otherImage1" /> <img src="https://images.pexels.com/photos/186077/pexels-photo-186077.jpeg?cs=srgb&dl=pexels-binyamin-mellish-186077.jpg&fm=jpg" alt="property" class="otherImage2" />
</div>
<h1>something else here</h1>
Having a hard time to make my header look like this, where left and right take the minimum width possible :
What I have so far :
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
header div {
min-height: 7rem;
display: flex;
align-items: center;
padding: 2rem 5rem;
background-color: blue;
}
.center {
background-color: yellow;
}
.right {
background-color: red;
}
<header>
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right">Right</div>
</header>
Using 1fr 1fr 1fr for the grid layout means that each of the items takes the same width - they share available width between them.
If you want the left and right sides to take up the minimum width necessary to contain them then set those to auto and the middle one to 1fr. The middle one will then take up all the remaining width.
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
display: grid;
grid-template-columns: auto 1fr auto;
}
header div {
min-height: 7rem;
display: flex;
align-items: center;
padding: 2rem 5rem;
background-color: blue;
}
.center {
background-color: yellow;
}
.right {
background-color: red;
}
<header>
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right">Right</div>
</header>
Learn more at:
A Complete Guide to Grid
An Introduction to the `fr` CSS unit
Use flex-grow: 1.
This can be easily achieved using display: flex and flex-grow: 1.
Learn more about flexbox:
A Complete Guide to Flexbox
W3Schools
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
display: flex;
}
header div {
min-height: 7rem;
align-items: center;
padding: 2rem 3rem;
background-color: blue;
}
.center {
background-color: yellow;
flex-grow: 1;
}
.right {
background-color: red;
}
<header>
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right">Right</div>
</header>
1fr 1fr 1fr create problem by giving same width
so i have used auto 1fr auto
by set auto it can change left right width on basis relatively with parent.
or you can set values for left and right eg: 0.2fr 0.2fr
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
display: grid;
grid-template-columns: auto 1fr auto;
}
header div {
min-height: 7rem;
display: flex;
align-items: center;
padding: 2rem 5rem;
background-color: blue;
}
.center {
background-color: yellow;
}
.right {
background-color: red;
}
<header>
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right">Right</div>
</header>
I have a flexbox with a grid and a div in it, and I'd like to collapse the grid container's height to the height of the rows, so that the buttons below it are just below the grid items. The number of rows is also dynamic, because I'm using grid-template-columns: repeat(auto-fit, minmax(250px, 1fr). I can set a max-height of the grid items, like in this image, but that only makes the items smaller and doesn't make the grid container any shorter.
I've tried changing the flexbox they're in so the flex-direction is row, and set flex-wrap to wrap, but that causes other problems and overlapping text when the window size changes. Setting the height or max-height of the grid container to fit-content seems to do nothing as well.
Here is what I have:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Boardgame Database</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
aside {
background-color: red;
flex: 1;
min-width: 250px;
}
.grid-container {
flex: 4;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid-item {
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 24px;
text-align: center;
overflow: hidden;
min-height: 100px;
}
#main-container {
display: flex;
flex-direction: row;
min-height: 100vh;
}
#section-container {
display: flex;
flex-direction: column;
width: 100%;
}
#page-buttons {
height: 50px;
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div id="main-container">
<aside class="sidebar">
</aside>
<div id="section-container">
<section class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</section>
<div id="page-buttons">
first
prev
page
next
last
</div>
</div>
</div>
</body>
</html>
The style
.grid-container {
flex: 4;
}
is equivalent to flex-grow: 4;
so it makes the container grow. Just remove it and it will keep its dimension
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
aside {
background-color: red;
flex: 1;
min-width: 250px;
}
.grid-container {
/* flex: 4; */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid-item {
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 24px;
text-align: center;
overflow: hidden;
min-height: 100px;
}
#main-container {
display: flex;
flex-direction: row;
min-height: 100vh;
}
#section-container {
display: flex;
flex-direction: column;
width: 100%;
}
#page-buttons {
height: 50px;
text-align: center;
font-size: 20px;
}
<body>
<div id="main-container">
<aside class="sidebar">
</aside>
<div id="section-container">
<section class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</section>
<div id="page-buttons">
first
prev
page
next
last
</div>
</div>
</div>
</body>
I'm trying to create a layout where the screen is divided into some number of equally-sized cells. When I fill one of the cells with content, it stretches to be larger than the other cells, even though the content is much smaller than the cell itself.
Why is the cell stretching despite it being plenty big to hold its content? How can I prevent it from resizing?
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color: #880022;
}
#content {
display: grid;
width: 100%;
height: 100%;
grid-template-rows: 20px auto 20px;
grid-template-columns: 20px auto 20px;
}
#content2 {
display: grid;
grid-template-rows: auto;
grid-template-columns: auto;
height: 100%;
background-color: #ff00ff;
}
#grid {
grid-row-start: 2;
grid-column-start: 2;
display: grid;
grid-template-rows: auto auto;
grid-template-columns: auto auto;
grid-gap: 2px 2px;
}
.tile {
background-color: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.tile span {
font-size: 2em;
}
.tile:hover {
background-color: rgba(255, 255, 255, 0.3);
}
<div id="content">
<div id="grid">
<div class="tile"><span>test</span></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
</div>
You're setting the column and row sizes to auto. This means they will be sized based on their content. Instead, use fr units, which use the free space in the container.
#content {
display: grid;
grid-template-rows: 20px auto 20px;
grid-template-columns: 20px auto 20px;
height: 100vh;
background-color: #880022;
}
#grid {
grid-row-start: 2;
grid-column-start: 2;
display: grid;
grid-template-rows: 1fr 1fr; /* adjustment */
grid-template-columns: 1fr 1fr; /* adjustment */
grid-gap: 2px;
}
.tile {
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.2);
}
.tile:hover {
background-color: rgba(255, 255, 255, 0.3);
}
.tile span {
font-size: 2em;
}
body {
margin: 0;
}
<div id="content">
<div id="grid">
<div class="tile"><span>test</span></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
</div>
jsFiddle demo
You have a lot of extra markup, here is a simplified version, the trick is using fr unit instead of auto and you can use repeat()
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #802;
}
#grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, minmax(80px, 1fr));
grid-gap: 2px;
padding: 20px;
box-sizing: border-box;
height: 100vh
}
.tile {
background-color: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.tile span {
font-size: 2em;
}
.tile:hover {
background-color: rgba(255, 255, 255, 0.3);
}
<div id="grid">
<div class="tile"><span>test</span></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
One solution would be to give line-height: 0 to your .tile elements. This will ensure that the text doesn't take up any space, though will limit you to only having one line of text per square:
html,
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color: #880022;
}
#content {
display: grid;
width: 100%;
height: 100%;
grid-template-rows: 20px auto 20px;
grid-template-columns: 20px auto 20px;
}
#content2 {
display: grid;
grid-template-rows: auto;
grid-template-columns: auto;
height: 100%;
background-color: #ff00ff;
}
#grid {
grid-row-start: 2;
grid-column-start: 2;
display: grid;
grid-template-rows: auto auto;
grid-template-columns: auto auto;
grid-gap: 2px 2px;
}
.tile {
background-color: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.tile span {
font-size: 2em;
}
.tile:hover {
background-color: rgba(255, 255, 255, 0.3);
}
<!DOCTYPE html>
<html>
<body>
<div id="content">
<div id="grid">
<div class="tile"><span>test</span></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
</div>
</body>
</html>
However, in my opinion, the better solution would be to set grid-auto-rows: 1fr on #grid, which instructs each of the rows to take up as much height as the tallest row:
html,
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color: #880022;
}
#content {
display: grid;
width: 100%;
height: 100%;
grid-template-rows: 20px auto 20px;
grid-template-columns: 20px auto 20px;
}
#content2 {
display: grid;
grid-template-rows: auto;
grid-template-columns: auto;
height: 100%;
background-color: #ff00ff;
}
#grid {
grid-row-start: 2;
grid-column-start: 2;
display: grid;
grid-template-rows: auto auto;
grid-template-columns: auto auto;
grid-gap: 2px 2px;
grid-auto-rows: 1fr;
}
.tile {
background-color: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.tile span {
font-size: 2em;
}
.tile:hover {
background-color: rgba(255, 255, 255, 0.3);
}
<!DOCTYPE html>
<html>
<body>
<div id="content">
<div id="grid">
<div class="tile"><span>test</span></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
</div>
</body>
</html>
Try
max-width:something px;
max-height:something px;
inside #grid.
So I was wondering if it was possible for display: grid to center its items at the center like a flexbox if the row isn't filled up.
Example:
for (let i = 0; i < 3; i++)
{
$("#main").append($("<div class='item'>test</div>"))
$("#flex").append($("<div class='flex-item'>test</div>"))
}
#main {
display: grid;
grid-template-columns: repeat(6, 1fr);
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.item {
border: 1px solid black;
height: 100px;
}
#flex {
display: flex;
width: 100%;
justify-content: center;
}
.flex-item {
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
</div>
<div id="flex">
</div>
Apply auto instead 1fr in grid-template-columns. Then apply your desired width for your items. It will make the desired result.
#main {
display: grid;
grid-template-columns: repeat(6, auto);
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.item {
border: 1px solid black;
height: 100px;
width:100px;
}
DEMO
UPDATE:
If you don't want to fix the column width then use the vw to apply dynamic width based on your screen.
.item {
border: 1px solid black;
content: "test";
height: 100px;
width:16vw;
}
DEMO