I have 4 divs and on a normal computer screen, they come next to each other with the following code.
.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.div1 {
grid-area: 1 / 1 / 2 / 2;
}
.div2 {
grid-area: 1 / 2 / 2 / 3;
}
.div3 {
grid-area: 1 / 3 / 2 / 4;
}
.div4 {
grid-area: 1 / 4 / 2 / 5;
}
<div class="parent">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
</div>
When I view this on my smartphone, all 4 divs will display in 1 row.
How can I display 2 divs in 1 row? So the final result will be 2 rows with 2 divs each on a smartphone.
change this line: grid-template-columns: repeat(4, 1fr); to: grid-template-columns: repeat(2, 1fr); then you only have 2 columns per row.
then change this line: grid-template-rows: 1fr; to: grid-auto-rows: auto; to automatically insert as many rows as needed at size them to the highest content.
last but not least: delete css for all div-boxes as they are useless in this case anyway. Also its not the way it is or should be used.
use media queries to adjust design for different screen sizes as used in the sample below:
#media start the media query. with only screen you define that only the screen size should be used as rule. and (max-width: 480px) defines the rule to be applied for mobile screens (largest is 480px width for portrait mode).
.parent {
display: grid;
grid-auto-rows: auto;
grid-gap: 0px;
}
#media only screen
and (max-width: 480px) {
.parent {
grid-template-columns: repeat(2, 1fr);
}
}
#media only screen
and (min-width: 481px) {
.parent {
grid-template-columns: repeat(4, 1fr);
}
}
<div class="parent">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
</div>
You can use #media screen to make custom Css for different screen sizes.
#media screen is used to specify different layout for various screen sizes.
You can find the guide here:
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
This guide also includes examples where you would get an idea how to unitize #media screen thing.
Related
I have tabular data that is many columns wide and a couple of rows short, which works great on a desktop screen, but is too wide for mobile screens. How do I make this "table" responsive - transpose it - so that it is narrow and tall on mobile screens? I can't find clear explanation on the Internet. It is made of divs.
Like this with CSS grid:
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
.container div {
border: 1px solid black;
font-size: 18px;
text-align: center;
}
/* make table 'portait' instead of 'landscape' */
#media only screen and (max-width: 820px) {
.container {
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(5, 30px);
grid-auto-flow: column;
}
}
<div class="container">
<div>PRODUCT</div>
<div>APPLE</div>
<div>MANGO</div>
<div>ORANGE</div>
<div>BANANA</div>
<div>Price</div>
<div>$50</div>
<div>$25</div>
<div>$30</div>
<div>$15</div>
<div>Quantity</div>
<div>1</div>
<div>11</div>
<div>8</div>
<div>20</div>
</div>
I have a CSS grid with several columns and many rows (I'm building a timetable view). The rows and columns are defined on the grid element itself, and then on the elements within the grid I set their column (always only one column) and their rows (might be more than one row).
An example is as follows:
.grid {
display: grid;
grid-template-rows: [row-a] 1fr [row-b] 1fr [row-c] 1fr [row-d] 1fr;
grid-template-columns: [col] 1fr;
flex-grow: 1;
}
.entry-one {
grid-column: col;
grid-row: row-a/row-d;
background-color: red;
}
.entry-two {
grid-column: col;
grid-row: row-b;
background-color: green;
}
<div class='grid'>
<div class='entry-one'>
Foobar
</div>
<div class='entry-two'>
Barfoo
</div>
</div>
Now, what I would like to have is that the elements resize themselves and flow nicely, such that they fit next to each other. I can mock this using width and margin on the elements:
.grid {
display: grid;
grid-template-rows: [row-a] 1fr [row-b] 1fr [row-c] 1fr [row-d] 1fr;
grid-template-columns: [col] 1fr;
flex-grow: 1;
}
.entry-one {
grid-column: col;
grid-row: row-a/row-d;
background-color: red;
width: 50%; /* ADDED */
}
.entry-two {
grid-column: col;
grid-row: row-b;
background-color: green;
width: 50%; /* ADDED */
margin-left: 50%; /* ADDED */
}
<div class='grid'>
<div class='entry-one'>
Foobar
</div>
<div class='entry-two'>
Barfoo
</div>
</div>
However this is not optimal, especially as the elements are inserted dynamically. Is there a way to have the elements size & align themselves automatically using CSS? I've tried to use display: flex on the entries, but that did not result in what I want (or maybe I forgot to add another rule).
Thank you for any ideas, and have a nice day!
I made this to see if that is what you are looking for
.grid{
display: flex;
grid-template-rows: [row-a] 1fr [row-b] 1fr [row-c] 1fr [row-d] 1fr;
grid-template-columns: [col] 1fr;
flex-grow: 1;
}
I just changed your display to flex and delete your margin-left: 50%; on the entry two, hope it is what you are looking for
This CSS grid creates 7 rows only, as you can see by using "Inspect tool" of the browser.
Why?
.grid {
display: grid;
grid-gap: 1em;
height: 100%;
}
.grid8x8 {
grid-template-rows: repeat(8, 1fr);
grid-template-columns: repeat(8, 1fr);
}
.element {
background-color: yellow;
}
<div class="grid grid8x8">
<div class="element" style="grid-row: 2 / 4; grid-column: 3 / 6;">TEST</div>
</div>
You have actually 8 rows. What you see with the inspector is the gap between the cells, so for 8 rows there are 7 gaps (red lines are gaps):
If you reduce the gap size, you'll notice how the rows appear:
Note the 8 rows:
Your problem is the grid cell overflowing all the other cells because there's not enough space, because your grid-gap is too high.
Try this:
.grid { display: grid; grid-gap: 1em; height: 70vh; }
.grid8x8 { grid-template-rows: repeat(8, 1fr); grid-template-columns: repeat(8, 1fr); }
.element { background-color: yellow; }
<div class="grid grid8x8">
<div class="element" style="grid-row: 2 / 4; grid-column: 3 / 6;">TEST</div>
</div>
The code snippet below creates the desired behaviour for my components.
I want each row to have an individual height, both elements in that row to have the same height, and for small screens, only 1 column, and all "A" content should come first, then all "B" content.
It is just that my solution feels wrong to me. I feel like I am missing grid fundamentels on how to achieve this.
To be honest, I expected that giving A grid-column: 1 and B grid-column: 2 should have worked, but it did not.
FYI: the inline style height is just for simplification. In reality, I do not know the height. and the code looks something like this:
<Grid>
{CME puts all A here}
{CME puts all B here}
</Grid>
.A {
background-color: dodgerblue;
grid-column: 1;
}
.B {
/* grid-column: 2; */
background-color: red;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: dense;
column-gap: 2%;
row-gap: 50px;
}
#media screen and (max-width: 600px) {
.grid {
grid-template-columns: 1fr;
}
}
<div class="grid">
<div class="A">A1</div>
<div class="A" style="height: 150px">A2</div>
<div class="A" style="height: 50px">A3</div>
<div class="B" style="height: 200px">B1</div>
<div class="B">B2</div>
<div class="B">B3</div>
</div>
You can be explicit about which column you want B to go into.
This snippet ensures it's in column 2 in the wide version and in column 1 in the narrow one.
.A {
background-color: dodgerblue;
grid-column: 1;
}
.B {
grid-column: 2;
background-color: red;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: dense;
column-gap: 2%;
row-gap: 50px;
}
#media screen and (max-width: 600px) {
.grid {
grid-template-columns: 1fr;
}
.B {
grid-column: 1;
}
}
<div class="grid">
<div class="A">A1</div>
<div class="A" style="height: 150px">A2</div>
<div class="A" style="height: 50px">A3</div>
<div class="B" style="height: 200px">B1</div>
<div class="B">B2</div>
<div class="B">B3</div>
</div>
I have a set of children inside a display: grid container - each child is numbered. At the 600px breakpoint, child 4 completely loses composure and deflates to its inner content size. Why doesn't 4 hop on down below 3?
.box {
background: yellow;
display: flex;
justify-content: center;
align-items: center;
font-size: 48px;
font-weight: bold;
}
.box.md {
grid-column: span 2;
}
.box.lg {
grid-column: span 2;
grid-row: span 2;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-auto-rows: 240px;
grid-auto-flow: dense;
grid-gap: 8px;
}
#media (max-width: 920px) {
max-width: 800px;
}
#media (max-width: 600px) {
grid-auto-rows: 120px;
}
<div class="container">
<div class="box lg">1</div>
<div class="box md">2</div>
<div class="box sm">3</div>
<div class="box sm">4</div>
</div>
https://jsfiddle.net/amw273vq/
Why doesn't 4 hop on down below 3?
Because items 1 & 2 both have grid-column: span 2 applied. Meaning there are two columns already available, and item 4 has no reason to move to the next row.
Make all columns take a full row.
Add this to your code:
#media (max-width: 600px) {
.container > div {
grid-column: span 1 !important; (you need to override the span 2 rules higher up)
}
}
revised demo
And the reason for the collapse of item 4 has nothing to do with your media query.
If you look closely, you'll find the item 4 collapses when the screen width is 640px. This is before the 600px media query is reached.
Here's the issue:
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
At 640px screen width, item 3 reaches 280px, the minimum width it can be.
As a result, item 4 is pushed to the second column, which was created by grid-column: span 2 on its siblings.
However, at this screen size, there is only space for one explicit (i.e., defined) column. The second column must be generated in the implicit (i.e., undefined) grid.
And, because the default value of grid-auto-columns – the property that sizes implicit columns – is auto, the second column takes the width of the widest cell.