I'm working with CSS Grid and facing a problem with grid element which has height of 1fr and overflow-y: hidden.
It is <ul>, which has a big <li> number and must be scrollable.
In FF and Chrome everything works well, but Safari did not cut the list and did not add scroll. Similar problem in Edge.
Parent block:
.animatedBlock {
display: -ms-grid;
display: grid;
grid-template-rows: auto 1fr;
grid-gap: px(40);
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
-ms-grid-rows: auto px(20) 1fr;
position: relative;
width: 100%;
height: 100%;
}
Child #1
form {
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-column: 1;
position: relative;
user-select: none;
}
Child#2
ul {
#media screen\0 {
-ms-overflow-style: none;
}
#supports (-ms-ime-align:auto) {
-ms-overflow-style: none;
}
overflow-y: auto;
-ms-grid-row: 3;
-ms-grid-column: 1;
grid-column: 1;
grid-row: 2;
}
Here the second child is the target element, which must be scrollable.
Related
How can I set all grid heights to the image height?
■Structure
I have 3 contents displayed using Grid (.title, .image, and .search-container). The .search-container includes a search bar connected to an API and would display the results inside.
■What I want to do
For the smaller screen size, first, before searching, I want to have the 3 grids the same height as the image inside .image, and after searching, I want to have the first 2 grids remain the same and the .search-container height changed based on how long the search results are.
■Problem
Before searching, the .search-container is smaller than the min height set (minmax(210px, auto)) & smaller than the .title and .image
After searching, the .search-container is stretched to fit all results but the .title and .image change too and get smaller. How can I solve this?
I want to set the grid heights dynamically without setting 210px like here grid-template-rows: repeat(2, 1fr) minmax(210px, auto);. How can I do that?
.container {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: 50vh auto;
}
.title {
grid-column: 1;
grid-row: 1;
}
.image {
grid-column: 2;
grid-row: 1;
height: 50vh;
}
.image img {
width: 100%;
}
.search-container {
grid-column: span 2;
grid-row: 2;
min-height: 50vh;
}
#media only screen and (max-width: 820px) {
.container {
height: auto;
min-height: 100vh;
grid-template-columns: 1fr;
grid-template-rows: repeat(2, 1fr) minmax(210px, auto);
}
.title {
grid-column: 1;
grid-row: 1;
}
.image {
grid-column: 1;
grid-row: 2;
height: auto;
width: auto;
}
.image img {
height: 100%;
width: 100vw;
}
.search-container {
grid-row: 3;
grid-column: 1;
min-height: 0;
}
}
index.html
This is the index file with a hero image and hero content(title and subtitle)
<section class= 'container main-section grid'>
<div class="hero-content">
<div class="title">
<h1>Hi, I'm Megha</h1>
</div>
<div class="subtitle">
<p>I’m a software engineer, where I like spending my day with programming and a bit of designing in general.</p>
</div>
</div>
<div class='image-wrapper'>
<div class='girl-image'></div>
</div>
styles.css
Code for overlapping hero content and hero image using CSS grid.
.grid {
display: grid;
grid-template-columns: 2fr 2fr 1fr 1fr;
grid-template-rows: 1fr 2fr;
margin-top: 80px;
gap: 20px;
}
.hero-content {
grid-column: 1 / span 2;
grid-row: 2 / span 2;
z-index: 1;
margin-top: -50px;
align-content: center;
max-width: 80vh;
}
.hero-content .title {
font-family: blackjack;
font-size: 24px;
color: #16161D;
}
.hero-content .subtitle {
font-family: futurapt;
font-size: 22px;
color: #363636
}
.image-wrapper {
grid-column: 2/span 3;
grid-row: 1/span 2;
}
index.css
Code for changing responsive layout with hero content on top and image on the bottom.
#media only screen and (max-width: 1249px) {
header, .hero-content, .social-icons, .image-wrapper {
margin: 0 20px;
}
}
#media only screen and (max-width: 535px) {
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr 2fr 2fr;
}
.hero-content {
grid-column: 1;
grid-row: 1 / span 2;
}
.image-wrapper {
grid-column: 1;
grid-row: 3 / span 4;
}
}
The code does not work for responsive design for max-width 535px. I've been looking for a long while. Any help would be much appreciated.
Basically I want to change layout for mobile with a single column and 4 rows. This doesn't work. Why??
I've added a bit of CSS to your girl-image class so we could visualize where it currently lands in your grid. Your hero content DOES overlap your hero image at higher viewport widths. But on mobile, the hero image is under your hero content.
.girl-image {
background-color: cornflowerblue;
height: 100%;
width: 100%;
}
This is what your mobile layout looks like right now:
If you go above 535px, you get the image below:
.grid {
display: grid;
grid-template-columns: 2fr 2fr 1fr 1fr;
grid-template-rows: 1fr 2fr;
margin-top: 80px;
gap: 20px;
}
.hero-content {
grid-column: 1 / span 2;
grid-row: 2 / span 2;
z-index: 1;
margin-top: -50px;
align-content: center;
max-width: 80vh;
}
.hero-content .title {
font-family: blackjack;
font-size: 24px;
color: #16161d;
}
.hero-content .subtitle {
font-family: futurapt;
font-size: 22px;
color: #363636;
}
.image-wrapper {
grid-column: 2 / span 3;
grid-row: 1 / span 2;
}
.girl-image {
background-color: cornflowerblue;
height: 100%;
width: 100%;
}
#media only screen and (max-width: 1249px) {
header,
.hero-content,
.social-icons,
.image-wrapper {
margin: 0 20px;
}
}
#media only screen and (max-width: 535px) {
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr 2fr 2fr;
}
.hero-content {
grid-column: 1;
grid-row: 1 / span 2;
}
.image-wrapper {
grid-column: 1;
grid-row: 3 / span 4;
}
}
<section class='container main-section grid'>
<div class="hero-content">
<div class="title">
<h1>Hi, I'm Megha</h1>
</div>
<div class="subtitle">
<p>I’m a software engineer, where I like spending my day with programming and a bit of designing in general.</p>
</div>
</div>
<div class='image-wrapper'>
<div class='girl-image'></div>
</div>
</section>
I have a grid that displays data in a tabular format. The previous developer at my company used the grid-template-columns and minmax properties to implement the view but one of the tables has a a wide first column and every other column is alright. How do I equally space them out so they're the same width?
I've tried using minmax(auto, 1fr) and repeat(auto-fill, minmax(max-content, 1fr)) but it just messes up the entire structure of the view
The main container has the following CSS:
display: grid;
grid-template-columns: minmax(min-content, 30%) 1fr auto;
justify-content: center;
And the prt of the page that displays the table data is this :
display: grid;
grid-template-columns: minmax(auto, 1fr);
I expect the spacing to be equal across every column
View image
Here's an example of 3 equal columns using grid:
.parent {
background: blue;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
height: 100%;
width: 100%;
}
.child-1 {
background: red;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3 end;
}
.child-2 {
background: green;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3 end;
}
.child-3 {
background: black;
grid-column-start: 3;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3 end;
}
#-- Non-Grid Styles --#
body {
height: 100vh;
margin: 0;
width: 100vw;
}
.child-1,
.child-2,
.child-3 {
align-items: center;
color: white;
display: flex;
justify-content: center;
}
<div class="parent">
<div class="child-1">child 1</div>
<div class="child-2">child 2</div>
<div class="child-3">child 3</div>
</div>
This link has excellent explanations of how to use grid: Grid Info
Using CSS Grid Layout, I create a site whose layout changes a little with screen size.
Here, in order to keep the content (pink area) in the CSS Grid Layout central, I did the following styling.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.text {
color: #fff;
}
.bg {
background-color: #6c757d;
}
footer {
width: 100%;
display: grid;
grid-template-columns: minmax(20%, 1fr) auto minmax(20%, 1fr);
grid-template-rows: repeat(3, auto);
}
h1,
dl {
grid-column: 2;
background-color: pink;
}
p.h6 {
grid-row: 3;
grid-column: 3;
overflow-wrap: break-word;
}
#media (max-width: 800px) {
p.h6 {
grid-column: 2;
}
}
body>p {
text-align: center;
}
<footer class="bg text">
<h1>
heading
</h1>
<dl class="h6">
<dt>word1</dt>
<dd>desc1</dd>
<dt>word2</dt>
<dd>desc2</dd>
</dl>
<p class="h6">COPYRIGHT(C)loooooooooooooooooooooooooongtext</p>
</footer>
<p>↑<br>true center</p>
This seems to work well when the width is wide, but when the width is smaller, the pink area deviates from the "true center".
This also shows that minmax (20%, 1fr) does not work well.
How can I keep this pink area centered? Also, is there a better way than the one I thought above? (With CSS Grid Layout)
You can use grid-template-columns: 1fr auto 1fr for centering the middle column. Now add min-width: 0 on the p.h6 so that you override the default min-width: auto of grid items to allow it to shrink past content size (overflow value other than visible also works) - this allows overflow-wrap: break-word to take effect. See demo below:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.text {
color: #fff;
}
.bg {
background-color: #6c757d;
}
footer {
width: 100%;
display: grid;
grid-template-columns: 1fr auto 1fr; /* changed */
/*grid-template-rows: repeat(3, auto); <-- redundant */
}
h1,
dl {
grid-column: 2;
background-color: pink;
}
p.h6 {
grid-row: 3;
grid-column: 3;
overflow-wrap: break-word;
min-width: 0; /* added */
}
#media (max-width: 800px) {
p.h6 {
grid-column: 2;
}
}
body>p {
text-align: center;
}
<footer class="bg text">
<h1>
heading
</h1>
<dl class="h6">
<dt>word1</dt>
<dd>desc1</dd>
<dt>word2</dt>
<dd>desc2</dd>
</dl>
<p class="h6">COPYRIGHT(C)loooooooooooooooooooooooooongtext</p>
</footer>
<p>↑<br>true center</p>
Look at this rule:
p.h6 {
grid-column: 3;
}
When the width of the viewport is over 800px, the text in the p.h6 element, i.e. this: "COPYRIGHT(C)loooooooooooooooooooooooooongtext"
takes up the far right column, grid-column 3. The pink box in the center then can be very small. This is because you have set grid-template-columns for the footer element to this:
grid-template-columns: minmax(20%, 1fr) auto minmax(20%, 1fr);
In other words, the columns surrounding the pink box should be as big as possible (1fr), while the pink box should be as small as possible (auto, or the width of the text inside).
Now, when the viewport is less than 800px, the copyright text moves to the 2nd, or middle column:
#media (max-width: 800px) {
p.h6 {
grid-column: 2;
}
}
This forces the auto width of that column to be the entire width of the "loooooooongtext." That's why it overflows the viewport when you shrink it too small.
You can fix this by adding two property values to the direct children of the footer:
footer > *{
overflow-wrap: break-word;
overflow: hidden;
}
Both go in the max-width: 800px media query. Demo:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.text {
color: #fff;
}
.bg {
background-color: #6c757d;
}
footer {
width: 100%;
display: grid;
grid-template-columns: minmax(20%, 1fr) auto minmax(20%, 1fr);
grid-template-rows: repeat(3, auto);
}
h1,
dl {
grid-column: 2;
background-color: pink;
}
p.h6 {
grid-row: 3;
grid-column: 3;
overflow-wrap: break-word;
}
#media (max-width: 800px) {
p.h6 {
grid-column: 2;
}
footer{
grid-template-columns: 1fr 1fr 1fr;
}
footer > *{
overflow-wrap: break-word;
overflow: hidden;
}
}
body>p {
text-align: center;
}
<footer class="bg text">
<h1>
heading
</h1>
<dl class="h6">
<dt>word1</dt>
<dd>desc1</dd>
<dt>word2</dt>
<dd>desc2</dd>
</dl>
<p class="h6">COPYRIGHT(C)loooooooooooooooooooooooooongtext</p>
</footer>
<p>↑<br>true center</p>
The cart form is stretching vertically and the thumbs are positioning in the bottom left corner, when I'd like them to sit directly under the cart form like so:
.product-page--main-content {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto 1fr auto;
}
.product-page--main-content>* {
padding: 50px 100px;
border: 1px solid #ccc;
}
.product-page--cart-form-block {
grid-row: 2;
}
.product-page--thumbs {
grid-row: 3;
}
.product-page--images {
grid-column: span 2;
grid-row: span 3;
height: 400px;
}
.product-page--description {
grid-row: span 3;
}
<div class="product-page--main-content">
<div class="product-page--title-n-vendor">Title</div>
<div class="product-page--cart-form-block">Cart form</div>
<div class="product-page--thumbs">Thumbs</div>
<div class="product-page--images">Images</div>
<div class="product-page--description">Description</div>
</div>
Codepen: https://codepen.io/paulmason/pen/rYXyYW
The code you have is working perfectly, as written.
Your image grid item is set to height: 400px.
.product-page--images {
grid-column: span 2;
grid-row: span 3;
height: 400px;
}
Then you have 50px in top and bottom padding.
.product-page--main-content > * {
padding: 50px 100px;
border: 1px solid #ccc;
}
So the image grid item is 500px tall, in a row set to 1fr, in a grid with three rows. It all works perfectly, as specified.
Maybe what you want is four rows:
.product-page--main-content {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* grid-template-rows: auto 1fr auto; */ /* now defaults to grid-auto-rows: auto */
}
.product-page--main-content > * {
padding: 50px 100px;
border: 1px solid #ccc;
}
.product-page--cart-form-block {
grid-row: 2;
}
.product-page--thumbs {
grid-row: 3;
}
.product-page--images {
grid-column: span 2;
grid-row: span 4; /* changed from 3 */
height: 400px;
}
.product-page--description {
grid-row: span 4; /* changed from 3 */
}
<div class="product-page--main-content">
<div class="product-page--title-n-vendor">Title</div>
<div class="product-page--cart-form-block">Cart form</div>
<div class="product-page--thumbs">Thumbs</div>
<div class="product-page--images">Images</div>
<div class="product-page--description">Description</div>
</div>
I'm not sure this is what you're asking but this seems to fit: change
grid-template-rows: auto 1fr auto;
to
grid-template-rows: 3;