So I have this layout on my grid
But as the width goes smaller I want to change to this layout
So far I have it like this
.row > div {
border: 1px solid black
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
<div class="col-md-6">
1
</div>
<div class="col-md-5">
<div class='row'>
<div class="col-md-12">
2
</div>
<div class="col-md-12">
3
</div>
</div>
</div>
</div>
I think best practice way CSS Grid layout to essay and customizable
.grid > div {
border: 1px solid black;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
#media (min-width: 768px) {
.one {
grid-row: 1/3;
}
}
.three {
grid-column: 1/3;
}
#media (min-width: 768px) {
.three {
grid-column: 2/3;
}
}
<div class='grid'>
<div class="one">
1
</div>
<div class="two">
2
</div>
<div class="three">
3
</div>
</div>
like this?
<div class='row'>
<div class="col-md-6 col-sm-6">
1
</div>
<div class="col-md-6">
<div class='row'>
<div class="col-md-12 col-sm-6">
2
</div>
<div class="col-md-12 col-sm-12">
3
</div>
</div>
</div>
</div>
Related
I'm currently trying to figure out why my blank image placeholders aren't showing up when I use CSS grid. No matter what selectors I use and how I use them, I can't seem to figure out how to make it appear.
I've tried messing around with the class selectors and styles to make it appear, but I've been getting no luck in getting it to pop up. This is my current code right now revolving around the image placeholders:
.story {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
gap: 1.618rem;
}
.story:nth-child(even) {
flex-direction: row-reverse;
}
.story .image {
aspect-ratio: 1;
background-color: #dadada;
flex: 0 0 calc(50% - 1.618rem);
}
.story .description {
flex: 1 0 50%;
}
#media screen and (min-width: 576px){
.story .image {
flex-basis: 30%;
}
}
#media screen and (min-width: 992px){
.story,
.story:nth-child(even) {
flex-flow: column wrap;
}
.story .image {
aspect-ratio: 16/9;
flex: 0 0 100%;
width: 100%;
background-color: blue;
}
}
And my HTML:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-12">
<h2>Articles</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="story">
<div class="image">Image</div>
<div class="description">
<h2>Story Name</h2>
<p>Lorem ipsum...</p>
Link
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="story">
<div class="image">Image</div>
<div class="description">
<h2>Story Name</h2>
<p>Lorem ipsum...</p>
Link
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="story">
<div class="image">Image</div>
<div class="description">
<h2>Story Name</h2>
<p>Lorem ipsum...</p>
Link
</div>
</div>
</div>
</div>
</div>
Please help me understand what I am doing wrong! T_T
I am working on a product grid with an alternating row pattern like this.
The color containers represent what I think the rows should look like.
Basically there are two products on the first row, and one product on the second row, repeating infinitely. I've been trying to do it with css grids + nth child, but I can't seem to get it right. Here's what I have so far:
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-column-gap: 0;
width: 70vw;
margin: 0 auto;
}
.item:nth-child(3n+3) {
grid-column: auto / span 2;
background-color: #e2a7de;
}
/*just for debugging*/
.container{grid-gap:5px;}
.item{background-color: #ffa900;padding: 10px;text-align:center;}
<div class="container">
<div class="item">
X
</div>
<div class="item">
X
</div>
<div class="item">
X
</div>
<div class="item">
X
</div>
<div class="item">
X
</div>
</div>
My brain can't wrap around combining grids and nth-child to create this layout. I'm also open to a better way of creating this 2-1-2 pattern if anyone has other suggestions. Thank you!
You can simplify your code like below:
.container {
display: grid;
grid-auto-columns: 1fr; /* all columns equal */
width: 70vw;
margin: 0 auto;
}
.item:nth-child(3n) {
grid-column: span 2; /* span and create two columns*/
background-color: #e2a7de;
}
/*just for debugging*/
.container{grid-gap:5px;}
.item{background-color: #ffa900;padding: 10px;text-align:center;}
<div class="container">
<div class="item">
X
</div>
<div class="item">
X
</div>
<div class="item">
X
</div>
<div class="item">
X
</div>
<div class="item">
X
</div>
</div>
Update the grid-template-columns to be 1fr 1fr
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 0;
width: 70vw;
margin: 0 auto;
}
.item:nth-child(3n+3) {
grid-column: auto / span 2;
background-color: #e2a7de;
}
/*just for debugging*/
.container{grid-gap: 5px;}.item {background-color: #ffa900;padding: 10px;text-align: center;}
<div class="container">
<div class="item">
X
</div>
<div class="item">
X
</div>
<div class="item">
X
</div>
<div class="item">
X
</div>
<div class="item">
X
</div>
</div>
I have the following table design, laid out with CSS Grid (see first snippet).
Is it possible to make all columns of the same type/class (e.g. .Table_col_day) as wide as the column of that type/class with the widest content, with CSS/without JS? The solution doesn’t have to be CSS Grid based.
See the second code snippet for a quick JS-based solution, to illustrate what I'd like to do.
.Table__row {
background-color: plum;
display: grid;
grid-template-columns: 0.5fr 0.5fr 1fr;
}
.Table__row:nth-of-type(even) {
background-color: lime;
}
<div class="Table">
<div class="Table__row">
<div class="Table__day">Mon</div>
<div class="Table__time">10am</div>
<div class="Table__title">Some event</div>
</div>
<div class="Table__row">
<div class="Table__day">Tue</div>
<div class="Table__time">12:30pm</div>
<div class="Table__title">Another event</div>
</div>
<div class="Table__row">
<div class="Table__day">Wed</div>
<div class="Table__time">9:00am</div>
<div class="Table__title">A different event</div>
</div>
</div>
Javascript-based solution (determine widest column content, then manually set grid column styles of row element)
function resizeColumns(SELECTOR) {
const colElements = document.querySelectorAll(SELECTOR);
//////
const widths = [...colElements].map(el => el.querySelector('span').offsetWidth);
const width_max = Math.max(...widths);
//////
for(let col of colElements) {
col.parentNode.style.gridTemplateColumns = `${width_max}px 0.5fr 1fr`;
}
}
resizeColumns('.Table__col_day');
.Table__row {
background-color: plum;
display: grid;
grid-template-columns: 0.5fr 0.5fr 1fr;
}
.Table__row:nth-of-type(even) {
background-color: lime;
}
<div class="Table">
<div class="Table__row">
<div class="Table__col_day">
<span>Mon</span>
</div>
<div class="Table__col_time">
<span>10am</span>
</div>
<div class="Table__col_title">
<span>Some event</span>
</div>
</div>
<div class="Table__row">
<div class="Table__col_day">
<span>Tue</span>
</div>
<div class="Table__col_time">
<span>12:30pm</span>
</div>
<div class="Table__col_title">
<span>Another event</span>
</div>
</div>
<div class="Table__row">
<div class="Table__col_day">
<span>Wed</span>
</div>
<div class="Table__col_time">
<span>9:00am</span>
</div>
<div class="Table__col_title">
<span>A different event</span>
</div>
</div>
</div>
You said it at the beginning: "table design" so use table
.Table {
display: table;
width: 100%;
}
.Table__row {
background-color: plum;
display: table-row;
}
.Table__row > * {
display: table-cell;
white-space: nowrap;
}
.Table__row > *:not(.Table__day) {
width: 50%;
}
.Table__row:nth-of-type(even) {
background-color: lime;
}
<div class="Table">
<div class="Table__row">
<div class="Table__day">Mon</div>
<div class="Table__time">10am</div>
<div class="Table__title">Some event</div>
</div>
<div class="Table__row">
<div class="Table__day">Tue</div>
<div class="Table__time">12:30pm</div>
<div class="Table__title">Another event</div>
</div>
<div class="Table__row">
<div class="Table__day">Wed</div>
<div class="Table__time">9:00am</div>
<div class="Table__title">A different event</div>
</div>
</div>
Or consider display:contents if you want to keep display:grid;
.Table {
display: grid;
grid-template-columns: auto 1fr 1fr;
}
.Table__row {
display: contents;
}
.Table__row > * {
background-color: plum;
}
.Table__row:nth-of-type(even) > * {
background-color: lime;
}
<div class="Table">
<div class="Table__row">
<div class="Table__day">Mon</div>
<div class="Table__time">10am</div>
<div class="Table__title">Some event</div>
</div>
<div class="Table__row">
<div class="Table__day">Tue</div>
<div class="Table__time">12:30pm</div>
<div class="Table__title">Another event</div>
</div>
<div class="Table__row">
<div class="Table__day">Wed</div>
<div class="Table__time">9:00am</div>
<div class="Table__title">A different event</div>
</div>
</div>
I am new to grid layouts in CSS and I want to have a simple layout with one column
and three rows but one of the rows has to be again divided into three columns
so it will be something like below where 2, 3, 4 have to be in the same row equally spaced
or controllable.
Here is my grid structure:
<div class="grid_container">
<div class="card" id="about_me">
<p>
1
</p>
</div>
<div class="card card-small" id="">
<p>
2
</p>
</div>
<div class="card card-small" id="">
<p>
3
</p>
</div>
<div class="card card-small" id="">
<p>
4
</p>
</div>
<div class="card" id="">
<p>
5
</p>
</div>
</div>
I feel like using flex-box for the three rows, but thats not probably what I should do
as grid probably has its own logic and control to generate such a layout.
using grid-column css
work fine also with gaps
only one div that contain all the cards
.grid_container {
display: grid;
gap: 0.5rem;
}
.card {
border: 1px dashed red;
display: grid;
place-items: center;
}
<div class="grid_container">
<div style="grid-column: 1/4" class="card" id="about_me">
<p>1</p>
</div>
<div style="grid-column: 1/2" class="card card-small" id="">
<p>2</p>
</div>
<div style="grid-column: 2/3" class="card card-small" id="">
<p>3</p>
</div>
<div style="grid-column: 3/4" class="card card-small" id="">
<p>4</p>
</div>
<div style="grid-column: 1/4" class="card" id="">
<p>5</p>
</div>
</div>
using flexbox
Another easier solution can be using grid when is necessary, or flexbox when is necessary.
so the 3, 4, 5 cards can be wrapped inside a <div> and make that div with flexbox
and the parent element grid
.grid_container {
display: grid;
}
.flex_container {
display: flex;
}
.flex_container>* {
flex: 1;
}
.card {
border: 1px dashed red;
display: grid;
place-items: center;
}
<div class="grid_container">
<div class="card" id="about_me">
<p>1</p>
</div>
<div class="flex_container">
<div class="card card-small" id="">
<p>2</p>
</div>
<div class="card card-small" id="">
<p>3</p>
</div>
<div class="card card-small" id="">
<p>4</p>
</div>
</div>
<div class="card" id="">
<p>5</p>
</div>
</div>
Maybe something like this would work for you if you want to use css grid:
.grid-container {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: 10px;
text-align: center;
}
.full-row {
grid-column: span 3 / span 3;
border: dashed red;
}
.one-third-row {
grid-column: span 1 / span 1;
border: dashed red;
}
<div class="grid-container">
<div class="full-row" id="about_me">
<p>
1
</p>
</div>
<div class="one-third-row" id="">
<p>
2
</p>
</div>
<div class="one-third-row" id="">
<p>
3
</p>
</div>
<div class="one-third-row" id="">
<p>
4
</p>
</div>
<div class="full-row" id="">
<p>
5
</p>
</div>
</div>
I've a five column grid, which has in some cases only content in three columns. The content should be right aligned, so that there will be an offset of two columns. Is there a possibility to do this automatically? Actually I'm doing it with grid-column-start: 3, grid-column-start: 4, grid-column-start: 5:
.grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 1rem;
margin: 2rem 0;
}
.col {
text-align: center;
padding: 2rem;
background-color: lightblue;
}
<div class="grid">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
</div>
<p>Actual syntax / layout:</p>
<div class="grid">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
<p>Should behave like this:</p>
<div class="grid">
<div class="col" style="grid-column-start: 3;">1</div>
<div class="col" style="grid-column-start: 4;">2</div>
<div class="col" style="grid-column-start: 5;">3</div>
</div>
Thought about something like justify-items: end but thats for the alignment of the content inside the column. For me I'm looking like even more a solution as it's behaviour in flexbox (justify-content), but I don't want to use flexbox ;)
Regards,
Markus
You can handle each case alone since they aren't a lot:
.grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 1rem;
margin: 2rem 0;
}
.col {
text-align: center;
padding: 2rem;
background-color: lightblue;
}
.col:nth-last-child(1):first-child {
grid-column-end: -1;
}
.col:nth-last-child(2):first-child {
grid-column-end: -2;
}
.col:nth-last-child(3):first-child {
grid-column-end: -3;
}
.col:nth-last-child(4):first-child {
grid-column-end: -4;
}
<div class="grid">
<div class="col">1</div>
</div>
<div class="grid">
<div class="col">1</div>
<div class="col">2</div>
</div>
<div class="grid">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
<div class="grid">
<div class="col" >1</div>
<div class="col" >2</div>
<div class="col" >3</div>
<div class="col" >4</div>
</div>
<div class="grid">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
</div>