My Code:
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
</div>
/*CSS*/
.container {
display: grid;
border: 1px solid;
grid-template-rows: repeat (4, 100px);
grid-template-columns: repeat (auto-fit, minmax(100px, 1fr));
}
.item {
background-color: red;
color: #6a3030;
font-size: 50px;
border: 1px solid;
}
What I expected was that the grids would be 100px each in a large viewport, and automatically fitting without overflowing.
But instead, the layout ended up like this:
enter image description here
I tried to set the grid-template values to
grid-template-rows: repeat (4, 100px);
grid-template-columns: repeat (4, 100px);
But nothing changes. The grid-template values are even crossed out in the Devtool.
enter image description here
How can I fix it back to the expected layout?
Related
I'm trying to solve a simple task but the solutions seem not be that simple.
Basically, I want many blocks with the same size to be aligned in center but I nee 1 block that is twice bigger than the others.
If I use FLEX - there are blank spaces around the big block.
If I use GRID - I can't align the blocks in the center.
Please help!
#all {
width: 100%;
border: 1px solid #ff0000;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, 150px);
grid-template-rows: repeat(auto-fill, 150px);
}
#all div {
width: 150px; height: 150px;
border: 1px solid #ff0000;
}
#all .big {
width: 310px; height: 312px;
grid-column: 2/ 4;
grid-row: 2 / 4;
}
<html>
<head>
<style>
</style>
</head>
<body>
<div id=all>
<div></div>
<div></div>
<div class=big></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
</body>
</html>
I need them to be aligned in the center
Here is an edited answer from W3Schools.
NOTE: there must be enough items to circle the one in the middle.
First, you need to add odd items in the grid.
Then, add odd columns to align them properly as you want.
Last, use grid-area to start any of the items from the 2nd row and column. then end it at the other corner according to the number of items in the grid.
and the good thing about this is that it's responsive and you can select any item to put it in the middle.
here is the code.
.grid-container {
display: grid;
grid-template-columns: auto auto auto ; /* odd column */
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item5 {
grid-area: 2 / 2 / 4 / 3; /* start and end the selected item */
display: flex;
justify-content: center;
align-items: center;
}
<h1>The grid-column Property</h1>
<p>Use the <em>grid-column</em> property to specify where to place an item.</p>
<div class="grid-container">
<!-- add odd items in the grid -->
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
<div class="item11">11</div>
</div>
Im using css grids for my project.
I have this css for the page
.App {
text-align: center;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(3, minmax(0, 1fr));
height: 100vh;
}
.grid-item {
background-color: rgba(0, 0, 0, 0.8);
border: 0.5px dotted rgba(255, 255, 255, 0.8);
padding: 20px;
color: white;
text-align: center;
}
and here is my layout
I want the grids where the calendar is shown to be just one grid with 2 rows span. Sorry, i know this is a stupid question but I'm not very good at styling
You could do it by defining grid-template-areas on the parent and placing the specific div in the wanted area using grid-area.
.app {
text-align: center;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(3, minmax(0, 1fr));
height: 100vh;
/* Naming the grid areas */
grid-template-areas:
"weather clock spotify"
"calendar mic number"
"calendar message feed";
}
.grid-item {
background-color: rgba(0, 0, 0, 0.8);
border: 0.5px dotted rgba(255, 255, 255, 0.8);
padding: 20px;
color: white;
text-align: center;
}
/* Instead if using nth-of-type you should add a custom class to the specific html element if it's possible. */
.app > div:nth-of-type(4) {
background-color: red;
/* Place the element in the desired area. */
grid-area: calendar;
}
You didn't include your HTML structure. But I imagine it'll look something like this.
<div class="app">
<div class="grid-item">
city weather
</div>
<div class="grid-item">
Clock
</div>
<div class="grid-item">
Spotify
</div>
<div class="grid-item">
Calendar
</div>
<div class="grid-item">
Mic
</div>
<div class="grid-item">
Some number
</div>
<div class="grid-item">
Message
</div>
<div class="grid-item">
Text feed
</div>
</div>
CSS Tricks has a quick overview on using css grid with template areas. https://css-tricks.com/snippets/css/complete-guide-grid/#grid-template-areas
I'm trying to create a two-column layout with CSS grid with items flow in a column direction and I managed to create the layout but the problem is when the child items are dynamic it breaks. here's the snippet that I've tried. so basically grid-template-rows: repeat(4, auto); <4> should be dynamic it should be half of the total number of items. Is there any way that I can achieve it through CSS. Click here for fiddle
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
.grid-container {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: repeat(4, auto);
grid-auto-flow: column;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
examples provided in earlier comments with column CSS did not seem to suits your needs : https://jsfiddle.net/hLnvk2b8/ , https://jsfiddle.net/hLnvk2b8/1 .
If you want to stick to the grid flowing into column with an unknown amount of rows Javascript could help you update the row's amount needed.
SASS is unable to access the document, it only compiles CSS selectors and CSS rules ,that is why you would need a script (it can be on server side too) to inspect the DOM:
example via javascript on browser's side :
window.onload = resetgrid('2');
function resetgrid(varcol) {
var colnum = varcol;/* how many columns do you want ? */
var child = document.getElementById("gridrow").childElementCount;/* how many children */
var els = child / colnum;/* how many rows could that make */
var rows = Math.round(els);/* row's number cannot be decimal */
var resetrow = document.createElement("STYLE");/* prepare to insert a style sheet */
var rowstyle = document.createTextNode(".grid-container { grid-template-columns:repeat(" + colnum + ",1fr);grid-template-rows: repeat(" + rows + ",auto);}");/* finalize the rules */
resetrow.appendChild(rowstyle);/* insert the rules inside style tag*/
document.head.appendChild(resetrow);/* insert the style tag inside head */
}
.grid-container {
display: grid;
grid-template-columns: 50% 50%;
grid-auto-flow: column;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
/*demo purpose*/
[data-table] {
display: table;
text-align: center;
margin: auto;
}
<!--demo purpose-->
<div data-table>
<p>reset numbers of columns </p>
<button onclick="resetgrid(1)">1</button>
<button onclick="resetgrid(2)">2</button>
<button onclick="resetgrid(3)">3</button>
</div>
<!--end demo-->
<div id="gridrow" class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
.two-columns{
width: 300px;
height: 400px;
border: 1px solid;
display: grid;
grid-template-columns: repeat(2, 1fr);
overflow: auto;
}
Have you tried using grid-auto-flow:row; it should ideally work. Here is a fiddle for the same. I have used your fiddle for the same and made changes to only one property.jsFiddle
Problem:
Right now both of the grid elements below are min: 250px, max: 1fr in size. They wrap on screen size <250px
I'm trying to achieve the following:
the first element to be min: 250px, max: 2fr
the second element to be min: 250px, max: 1fr
but also maintain wrapping to 1fr each on screen size <250px (the way they wrap now basically)
Code:
Codepen: https://codepen.io/anon/pen/dEBQgm?editors=1100
<div class="container">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
</div>
...
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 16px;
}
.child {
background: #aaa;
height: 32px
}
I tried this but I lost the wrapping:
grid-template-columns: minmax(250px, 2fr) minmax(250px, 1fr);
You can try flexbox for this:
.container {
display: flex;
flex-wrap: wrap;
margin:-8px; /*Pay attention to this! You may need overflow:hidden on a parent container*/
}
.child {
background: #aaa;
height: 32px;
min-width: 250px;
flex-basis: 0%;
margin: 8px;
}
.container> :first-child {
flex-grow: 2;
}
.container> :last-child {
flex-grow: 1;
}
.container-grid {
display: grid;
grid-template-columns: minmax(250px, 2fr) minmax(250px, 1fr);
grid-gap:16px;
}
.container-grid > .child {
margin:0;
}
flexbox with wrapping
<div class="container">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
</div>
grid without wrapping:
<div class="container-grid">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
</div>
I'm trying to create 3 divs each containing 1 <p>-tag and distribute all 3 on the same row with an equal width using CSS grid.
Most sources say that I should use grid-template-columns to achieve this. Some say to go for 1fr 1fr 1fr, some say repeat(3, 1fr), and yet more say repeat(3, auto).
The result is the same. The 3 divs end up on the same line, but their widths change depending on the width of their content. Is there a way to force all 3 divs to have the same width and simply use the next line if the content is too wide?
The snippet should show the situation I'm in.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.content {
margin: 2em;
}
<div class="grid-container">
<div class="content">
<p>TESTTESTTESTTESTTESTTESTTESTTESTTES</p>
</div>
<div class="content">
<p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>
</div>
<div class="content">
<p>TESTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>
</div>
</div>
Your grid is fine - the content is the problem here.
You can try word-break or overflow as a workaround:
word-break solution:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 2px dotted green;
}
.content {
margin: 2em;
border: 2px solid red;
}
.content p {
word-break: break-word;
}
<div class="grid-container">
<div class="content">
<p>TESTTESTTESTTESTTESTTESTTESTTESTTES</p>
</div>
<div class="content">
<p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>
</div>
<div class="content">
<p>TESTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>
</div>
</div>
overflow solution:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 2px dotted green;
}
.content {
margin: 2em;
border: 2px solid red;
overflow: auto;
}
<div class="grid-container">
<div class="content">
<p>TESTTESTTESTTESTTESTTESTTESTTESTTES</p>
</div>
<div class="content">
<p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>
</div>
<div class="content">
<p>TESTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>
</div>
</div>
EDIT: Apparently, word-break: break-word; does not work in Firefox - thanks, #Yaakov Ainspan. Another reminder that you should test your code in multiple browsers. word-break: break-all; can be used instead.
#fen1x's answer was close, but not quite. I experimented with this a bit, and found that word-break: break-all worked, while break-word did not. (The overflow solution sort of works, but isn't what the OP asked for).
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
max-width: 100%;
}
.content {
margin: 2em;
word-break: break-all;
}
<div class="grid-container">
<div class="content">
<p>TESTTESTTESTTESTTESTTESTTESTTESTTES</p>
</div>
<div class="content">
<p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>
</div>
<div class="content">
<p>TESTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>
</div>
</div>
Additionally, this solution does not need to be applied to individual elements inside the grid item, but can be applied directly to the item.
Try:
grid-template-columns: repeat(3, minmax(0, 1fr));