I'm having a problem when I am trying to make a horizontal scroll when the grid complete four columns. See
#series {
display: grid;
grid-gap: 16px;
overflow-x: scroll;
padding: 16px;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: column;
}
Using this I get below output
But, you know, I want to get same like "four columns" and a scroll bar for see more.
What's the problem.
Try it with this:
display: grid;
grid-gap: 16px;
padding: 16px;
grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
grid-auto-flow: column;
grid-auto-columns: minmax(160px,1fr);
overflow-x: auto;
grid-auto-flow: column; will force the grid to add your elements as column instead of following the free space.
grid-auto-columns: minmax(160px,1fr); the items added outside the viewport do not match auto-fit, so they won't get the size defined in your template. So you have to define it again with grid-auto-columns.
overflow-x: auto; auto will add the scrollbar
Horizontal scrolling containers the right way! Source
:root {
--gutter: 20px;
}
.app {
padding: var(--gutter) 0;
display: grid;
grid-gap: var(--gutter) 0;
grid-template-columns: var(--gutter) 1fr var(--gutter);
align-content: start;
}
.app > * {
grid-column: 2 / -2;
}
.app > .full {
grid-column: 1 / -1;
}
.hs {
display: grid;
grid-gap: calc(var(--gutter) / 2);
grid-template-columns: 10px repeat(6, calc(50% - var(--gutter) * 2)) 10px;
grid-template-rows: minmax(150px, 1fr);
overflow-x: scroll;
scroll-snap-type: x proximity;
padding-bottom: calc(.75 * var(--gutter));
margin-bottom: calc(-.5 * var(--gutter));
}
.hs:before,
.hs:after {
content: '';
}
/* Hide scrollbar */
.hide-scroll {
overflow-y: hidden;
margin-bottom: calc(-.1 * var(--gutter));
}
/* Demo styles */
html,
body {
height: 100%;
}
body {
display: grid;
place-items: center;
background: #456173;
}
ul {
list-style: none;
padding: 0;
}
h1,
h2,
h3 {
margin: 0;
}
.app {
width: 375px;
height: 667px;
background: #DBD0BC;
overflow-y: scroll;
}
.hs > li,
.item {
scroll-snap-align: center;
padding: calc(var(--gutter) / 2 * 1.5);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #fff;
border-radius: 8px;
}
<div class="app">
<h1>Some headline</h1>
<div class="full hide-scroll">
<ul class="hs">
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
</ul>
</div>
<div class="container">
<div class="item">
<h3>Block for context</h3>
</div>
</div>
</div>
try this:
.container{
display: grid;
grid-auto-columns: max-content;
grid-template-rows: 1fr;
width: 100%;
overflow-x: auto;
}
.child{
grid-row: 1;
grid-column: auto;
}
Your problem is that you are using 1fr unit. Instead put 25% (use calc to accommodate for any gaps). This will size your columns relative to available screen width. Of course you must apply 25% to grid-auto-columns also.
I faced a similar issue recently and none of the answers seemed to solve this the way I needed.
Here's my take on this:
body {
background-color: #e2e2e2;
}
h1,
h2 {
text-align: center;
}
.cards {
/* How many columns to show. */
--visible-cols: 4;
/* Gap between columns. */
--col-gap: 20px;
/* How much to show of the next hidden column. You can use this as a hint to show the user that there are more scrollable items. Particularly helpful for mobile devices where the scrollbar gets hidden by default.*/
--col-hint: 0px;
/* Whitespace between the elements and the scrollbar. */
--scrollbar-padding: 20px;
/* Calculated column size. */
--col-size: calc((100% / var(--visible-cols)) - var(--col-gap) - var(--col-hint));
display: grid;
grid-auto-flow: column;
grid-template-columns: var(--col-size);
grid-auto-columns: var(--col-size);
overflow-x: auto;
overflow-y: hidden;
grid-gap: var(--col-gap);
padding-bottom: var(--scrollbar-padding);
margin: 30px 0;
}
.cols-5,
.desktop-cols-5 {
--visible-cols: 5;
}
.cols-3 {
--visible-cols: 3;
}
.hint-next {
--col-hint: 20px
}
#media (max-width: 1024px) {
.laptop-cols-3 {
--visible-cols: 3;
}
}
#media (max-width: 767px) {
.tablet-cols-2 {
--visible-cols: 2;
}
.tablet-hint-next {
--col-hint: 15px
}
}
#media (max-width: 425px) {
.mobile-cols-1 {
--visible-cols: 1;
}
.mobile-hint-next {
--col-hint: 10px
}
}
.card {
display: flex;
flex-flow: column nowrap;
background-color: lightblue;
justify-content: center;
align-items: center;
padding: 10px;
border-radius: 10px;
min-height: 250px;
overflow: hidden;
}
.card-title,
.card-desc {
flex: 1;
border-radius: 10px;
}
.card-title {
font-size: 1.2em;
font-weight: bold;
}
.card-desc {
padding: 20px;
background-color: orange;
}
<div class="main">
<h1>CSS Grid - Scrollable Horizontal Layout Example</h1>
<h2>4 Columns</h2>
<div class="cards">
<div class="card">
<div class="card-title">Card 1</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 2</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 3</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 4</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 5</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 6</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 7</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 8</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 9</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 10</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
<h2>3 Columns - Hint Next</h2>
<div class="cards cols-3 hint-next">
<div class="card">
<div class="card-title">Card 1</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 2</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 3</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 4</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 5</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 6</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 7</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 8</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 9</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 10</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
<h1>Responsive Example</h1>
<h2>Desktop - 5 Columns</h2>
<h2>Laptop - 3 Columns</h2>
<h2>Tablet - 2 Columns - Hint Next</h2>
<h2>Mobile - 1 Column - Hint Next</h2>
<div class="cards desktop-cols-5 laptop-cols-3 tablet-cols-2 tablet-hint-next mobile-cols-1 mobile-hint-next">
<div class="card">
<div class="card-title">Card 1</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 2</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 3</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 4</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 5</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 6</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 7</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 8</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 9</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 10</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
The important bit being:
.cards {
/* How many columns to show. */
--visible-cols: 4;
/* Gap between columns. */
--col-gap: 20px;
/* How much to show of the next hidden column. You can use this as a hint to show the user there are more scrollable items. Particularly helpful for mobile devices where the scrollbar gets hidden by default.*/
--col-hint: 0px;
/* Whitespace between the slider and the scrollbar. */
--scroller-padding: 20px;
/* Calculated column size. */
--col-size: calc((100% / var(--visible-cols)) - var(--col-gap) - var(--col-hint));
display: grid;
grid-auto-flow: column;
grid-template-columns: var(--col-size);
grid-auto-columns: var(--col-size);
overflow-x: auto;
overflow-y: hidden;
grid-gap: var(--col-gap);
padding-bottom: var(--scroller-padding);
}
It can be very easily made responsive by adjusting the relevant CSS properties for each screen size. I have included a responsive example as well.
You can also check this as a codepen here: https://codepen.io/amyriounis/pen/VwyydGj
I think this medium article has the answer:
https://uxdesign.cc/creating-horizontal-scrolling-containers-the-right-way-css-grid-c256f64fc585
Basically it comes down to the fact that the individual cards need to have a fixed width instead of a dynamic one, in order to force the browser to not squish them together.
Related
I am experiencing a problem in CSS where my other divs overlap to the image above if I use percentages, for px I have no problem and the divs stay in place. I want the image to be in full-width size though as like a hero image and want it responsive in all screen sizes.
Screenshot of site
.img-slider{
position: relative;
width: 100%;
height: 300px;
margin-bottom: 90px;
background: #18191C;
}
.img-slider .slide{
z-index: 1;
position: absolute;
width: 100%;
clip-path: circle(0% at 0 50%);
}
.img-slider .slide.active{
clip-path: circle(150% at 0 50%);
transition: 1.3s;
transition-property: clip-path;
}
.img-slider .slide img{
z-index: 1;
width: 100%;
width: 100%;
border-radius: 5px;
}
<div class="img-slider">
<div class="slide active">
<img src="images/Thumb/img1.png" alt="">
<div class="info">
<h2>Native Fixtures</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="slide">
<img src="images/Thumb/img2.png" alt="">
<div class="info">
<h2>Slide 02</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="slide">
<img src="3.jpg" alt="">
<div class="info">
<h2>Slide 03</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="slide">
<img src="4.jpg" alt="">
<div class="info">
<h2>Slide 04</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="slide">
<img src="5.jpg" alt="">
<div class="info">
<h2>Slide 05</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
If you use flex box with the justify-content:space-around setting and flex-grow you can create the effect your looking for.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I created a list of cards using grid. The CSS:
body {
padding: 40px 0;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid > article {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
}
.grid > article img {
max-width: 100%;
}
.grid .text {
padding: 20px;
}
The HTML:
<div id="app" class="container">
<div class="grid">
<article v-for="tool in tools">
<div class="title">
<h3>{{capitalizeFirstLetter(tool.name)}}</h3>
</div>
<div class="description">
{{tool.description}}
</div>
</article>
</div>
</div>
How do I keep up to 3 cards per row? I can't seem to understand how should I treat the grid so I will keep maximum 3 cards per row. For example I have 8 elements, then It will be:
card card card
card card card
card card
Change grid-template-columns property auto-fill to 3.
body {
padding: 40px 0;
}
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(280px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid>article {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
}
.grid>article img {
max-width: 100%;
}
.grid .text {
padding: 20px;
}
<div id="app" class="container">
<div class="grid">
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
</div>
</div>
I am using angular and bootstrap4, I have few rows inside the divs
How do I keep line1 text always at the same height so that if any div has a line0 then all the line1 text in all divs will go down and remain always in the same line?
<div *ngFor="let account of clientAccounts" >
<h6 class="card-title customCardTitle">{{ account.number }}</h6>
<h1 class="card-subtitle"> {{ account.cash }} </h1>
</div>
so if account.number has more then 0 lines then account.cash is not aligned horizontally , this is what I am missing.
.customCardTitle has white-space: pre-line
at the end I need to prevent this, and keep cash information in the same line
Bootstrap row will contain flex property. With that only we can able to use flex properties for child divs
align-items-center will center the content inside cols
<div class="container">
<div class="row align-items-center">
<div class="col-3"><span>test</span></div>
<div class="col-3"><span>test</span></div>
</div>
</div>
Now code will center the text vertically, But within the container height. It won't be center to your html page.
To make Your text to center of your page, make row div to full height 100vh
.wrap{
display: flex;
justify-content: center;
align-items: stretch;
}
.card{
display: flex;
justify-content: center;
flex-direction: column;
width: 400px;
background: gray;
margin: 10px;
padding: 20px;
color: #FFF;
}
.card-title{
flex: 1;
}
<div class="wrap">
<div class="card">
<h6 class="card-title customCardTitle">AT0080456789 (Aco)</h6>
<h1 class="card-subtitle">$ 1,557</h1>
</div>
<div class="card">
<h6 class="card-title customCardTitle">AT0080456789 (Aco) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</h6>
<h1 class="card-subtitle">$ 2,357</h1>
</div>
<div class="card">
<h6 class="card-title customCardTitle">AT0080456789 (Aco) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua</h6>
<h1 class="card-subtitle">$ 557,256</h1>
</div>
</div>
I have two separate CSS grids within the same parent container.
The first of the 2 grids has the column property grid-template-columns: 1fr 2fr;
The second of the 2 has grid-template-columns: 1fr 1fr 1fr;
Yet somehow the grids aren't quite lined up - the text in the top grid needs to start in the second column (as shown), but it's ever so slightly out of alignment with the grid below, which is being cause by the column sizing.
I could really do without putting them both within the same grid because of the site design.
Is there anyway to get them to align with CSS Grid syntax without placing them both within the same grid?
Codepen: https://codepen.io/emilychews/pen/qzvPqJ
body {
margin: 0;
padding: 0;
}
.grid-section {
display: flex;
flex-direction: column;
align-items: center;
}
.row {
width: 80%;
max-width: 1250px;
}
.grid-column {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem;
}
/* adds space to main grid title*/
.grid-row.row-1 .grid-column {
margin: 5rem 0;
grid-template-columns: 1fr 2fr
}
.grid-image {
height: 10rem;
width: 100%;
background: lightblue;
}
h4.grid-heading {
margin: 1rem 0 0 0;
}
.grid-text {
position: relative;
padding: 0 1rem 0 0;
margin: 0 0 1rem 0;
}
<section class="section grid-section section-2">
<div class="row grid-row row-1">
<div class="one-col grid-column column-1">
<div class="grid-heading"></div>
<div class="grid-heading">
<h3 class="grid-title">Focused on the Issues That Affect You.</h3>
</div>
</div>
</div>
<div class="row grid-row row-2">
<div class="one-col grid-column column-1">
<div class="home-grid grid-item-1">
<div class="grid-image"></div>
<div class="grid-text">
<h4 class="td grid-heading family">Lorem</h4>
<hr>
<p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="arrow-wrapper"></div>
</div>
</div>
<div class="home-grid grid-item-2">
<div class="grid-image"></div>
<div class="grid-text">
<h4 class="td grid-heading employment">Lorem</h4>
<hr>
<p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="home-grid grid-item-3">
<div class="grid-image"></div>
<div class="grid-text">
<h4 class="td grid-heading residential-property">Lorem</h4>
<hr>
<p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="home-grid grid-item-4">
<div class="grid-image"></div>
<div class="grid-text">
<h4 class="td grid-heading wills">Lorem</h4>
<hr>
<p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="home-grid grid-item-5">
<div class="grid-image"></div>
<div class="grid-text">
<h4 class="td grid-heading landlord">Lorem</h4>
<hr>
<p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="home-grid grid-item-6">
<div class="grid-image"></div>
<div class="grid-text">
<h4 class="td grid-heading litigation">Lorem</h4>
<hr>
<p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="home-grid grid-item-7">
<div class="grid-image"></div>
<div class="grid-text">
<h4 class="td grid-heading commercial-property">Lorem</h4>
<hr>
<p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="home-grid grid-item-8">
<div class="grid-image"></div>
<div class="grid-text">
<h4 class="td grid-heading business-affairs">Lorem</h4>
<hr>
<p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="home-grid grid-item-9">
<div class="grid-image"></div>
<div class="grid-text">
<h4 class="td grid-heading media">Lorem</h4>
<hr>
<p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</section>
On the first grid, instead of this:
.grid-column {
display: grid;
grid-template-columns: 1fr 2fr;
}
Consider this:
.grid-column {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* or even grid-template-columns: 1fr */
text-align: center;
}
revised codepen
The reason of the missalignment is that in the first grid you have only one gap, in the second you have 2.
One posibility is to set the column property of the first grid to
grid-template-columns: 1fr 2fr 1px;
Now, the second item can no loger reach the rightmost border, but the missalignment is only a fraction of a pixel.
I'm trying to create a simple design, image on top, text underneath. I'm using flexbox.
I want to keep the images the same ratio so I'm using the padding top aspect ratio hack to do so, that works well.
What I'm struggling with is getting the text box beneath the image to take up the rest of the remaining space in the container. I was hoping that flexbox would make this easy but I think using it in conjunction with the aspect ratio hack is causing issues.
Here's a fiddle of the basic layout https://codepen.io/anon/pen/NEqdyN. Can anyone help me make each of the red boxes expand to fill the remaining height? I also need to add a border radius the bottom of each corner so I can't use the overflow hidden method.
Thanks in advance!
Code below
<div class="container">
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
CSS
body {
margin: 0;
}
.container {
display: flex;
}
.card {
width: 30%;
margin: 0 1%
}
.image-wrapper {
height: 0;
padding-bottom: 56.25%;
position: relative;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
top: 0;
left: 0;
}
.text {
background: red;
padding: 20px
}
It should work by defining a flex container on each card and using flex: 1 0 auto on text blocks.
.card {
display: flex;
flex-direction: column;
}
.text {
flex: 1 0 auto;
}
Demo
body {
margin: 0;
}
.container {
display: flex;
}
.card {
display: flex;
flex-direction: column;
width: 30%;
margin: 0 1%;
}
.image-wrapper {
height: 0;
padding-bottom: 56.25%;
position: relative;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
top: 0;
left: 0;
}
.text {
background: red;
padding: 20px;
flex: 1 0 auto;
}
<div class="container">
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>