I have three nested grids each containing rows where the content height is dynamic.
When a new row begins, I would like it to align with rows from the other nested grids.
It is not important the row numbers match up. It is also not important that nested grids are used and the markup can be changed. I ended up thinking this was the best way to solve the problem.
Desired outcome:
Here is a Codepen
.grid,
.sub-grid {
display: grid;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.sub-grid {
align-content: flex-start;
grid-auto-rows: minmax(30px, auto);
}
.row {
border-bottom: 1px solid #000;
}
<div class="grid">
<div class="sub-grid">
<div class="row">Row 1</div>
<div class="row">Row 2</div>
</div>
<div class="sub-grid">
<div class="row">Row 1</div>
<div class="row">Row 2</div>
<div class="row">Row 3</div>
<div class="row">Row 4</div>
<div class="row">Row 5</div>
<div class="row">Row 6</div>
</div>
<div class="sub-grid">
<div class="row">
Row 1 contents is longer<br />
But the next<br />
row should begin<br />
inline with another row<br />
</div>
<div class="row">
Row 2<br />
I should align with another row
</div>
<div class="row">Row 3</div>
<div class="row">Row 4</div>
<div class="row">Row 5</div>
</div>
</div>
Related
Here's a codepen illustrating the issue: https://codepen.io/robertcooper_rc/pen/jOYbdbR
I'm using a CSS grid to create a table layout. It's been working well, but I'm having an issue with the behavior of position: sticky on one of the columns in my grid.
I have a horizontally scrollable table with 4 columns and the first column is sticky.
When I scroll to the right, the first column does stick to the left as is expected.
However, when scrolling starts nearing the end of the table's horizontal space, the first no longer maintains its sticky position to the left edge of the table.
I've noticed that if I remove the HTML markup for the <aside>, the sticky column behavior works as expected. However, I need the <aside> to be present.
Any ideas on how to fix this with CSS while maintaining the DOM structure?
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
display: flex;
width: 300px;
padding: 0.5rem;
border: 1px solid red;
}
aside {
padding-right: 1rem;
width: 100px;
}
.table {
min-width: 0;
overflow: scroll;
}
.row {
display: grid;
grid-template-columns: repeat(4, 100px);
}
.col {
border: 1px solid black;
background: #eee;
}
.sticky {
position: sticky;
left: 0;
z-index: 1;
background: lightblue;
}
<div class="container">
<aside>
My aside
</aside>
<div class="table">
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
</div>
</div>
So the problem actually falls with the min-width set on .table. The width is not defined to the end of the row which is affecting the behavior of the sticky elements at row-end.
You'll notice if you exchange min-width: 0; to min-width: 100%; it functions as you would like, but then the table overflows outside of .container.
A stickily positioned element is treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root.
MDN CSS/Position
So with that said, the elements with the scroll need to have a defined width so the sticky element knows to stay sticky.
A simple solution would be to nest all of the .table elements in another wrapper that has a defined width. I chose 300px based on the rendered width of the content and the container.
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
display: flex;
width: 300px;
padding: 0.5rem;
border: 1px solid red;
}
aside {
padding-right: 1rem;
width: 100px;
}
.table {
min-width: 0;
overflow: scroll;
}
.row {
display: grid;
grid-template-columns: repeat(4, 100px);
}
.col {
border: 1px solid black;
background: #eee;
}
.sticky {
position: sticky;
left: 0;
z-index: 1;
background: lightblue;
}
.wrapper {
width: 300px;
}
<div class="container">
<aside>
My aside
</aside>
<div class="table">
<div class="wrapper">
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
</div>
</div>
</div>
I´m trying to generate a list of users (2 per row on desktop and 1 per row in mobile)
this is my markup
<div class="users">
<div>user 1</div>
<div>user 2</div>
<div>user 3</div>
<div>user 4</div>
</div>
this is my SCSS
.users {
display: flex;
#media (min-width: 1025px) {
column-count: 2;
}
}
I´m not sure if column-count is meant to be used like this.
you can use Bootstrap grid system like this .
<div class="users row">
<div class="col-lg-6 col-12" >user 1</div>
<div class="col-lg-6 col-12">user 2</div>
<div class="col-lg-6 col-12">user 3</div>
<div class="col-lg-6 col-12">user 4</div>
</div>
did You mean something like that?
HTML:
<div class="users">
<div>user 1</div>
<div>user 2</div>
<div>user 3</div>
<div>user 4</div>
</div>
CSS
.users {
display: flex;
flex-wrap: wrap;
max-width: 900px;
}
.users div {
background-color: teal;
margin-right: 10px;
width: 400px;
}
demo here -> https://codepen.io/AdamKniec/pen/PoPxXvJ
I have a formatted XML table. When a tag is empty, the column collapses and the following column prints into that space, messing up the column format.
The XSL file has styles for a series of columns like this:
.drawingrev {
float: left;
width: 0.8in;
text-align:center;
}
The data for each column is displayed:
<div class="drawingrev"><xsl:value-of select="Obj_RevisionNumber"/></div>
If the value-of is empty, the entry collapses and the next piece of data is written into that space.
I'd appreciate a little help in finding the appropriate settings to reserve the space,
Thanks!
If you use the CSS
.drawing-container {
display: flex;
flex-wrap: wrap;
}
and change your class to
.drawingrev {
width: 0.8in;
text-align:center;
}
and then make sure that divs with class="drawingrev" have a parent div class="drawing-container", the CSS flex box layout should just ensure an equal layout of your divs, whether they have content or not:
.drawingrev {
width: 0.8in;
text-align:center;
}
.drawing-container {
display: flex;
flex-wrap: wrap;
}
<div class="drawing-container">
<div class="drawingrev">item 1</div>
<div class="drawingrev">item 2</div>
<div class="drawingrev">item 3</div>
<div class="drawingrev">item 4</div>
<div class="drawingrev"></div>
<div class="drawingrev">item 6</div>
<div class="drawingrev">item 7</div>
<div class="drawingrev">item 8</div>
<div class="drawingrev">item 9</div>
<div class="drawingrev"></div>
<div class="drawingrev">item 11</div>
<div class="drawingrev">item 12</div>
<div class="drawingrev">item 13</div>
<div class="drawingrev">item 14</div>
<div class="drawingrev"></div>
<div class="drawingrev">item 16</div>
<div class="drawingrev">item 17</div>
<div class="drawingrev">item 18</div>
<div class="drawingrev">item 19</div>
<div class="drawingrev"></div>
</div>
I'm trying to implement layout where on desktop screen size we have 2 columns, and one column on mobile/tablets
is it possible to make this code:
<div class="posts-2-col">
<div class="post">Post 1</div>
<div class="post">Post 2</div>
<div class="post">Post 3</div>
<div class="post">Post 4</div>
<div class="post">Post 5</div>
<div class="post">Post 6</div>
</div>
to render like this:
(knowing that height of each post can e different)
I just put the fixed height to image a higher post
Jsfiddle
*{
box-sizing: border-box;
}
.posts-2-col{
width: 300px;
margin: 0 -10px;
}
.posts-2-col .post{
border: 1px solid red;
width: 135px;
margin: 0 5px;
margin-bottom: 10px;
float: left;
}
<div class="posts-2-col">
<div class="post">Post 1</div>
<div class="post">Post 2</div>
<div class="post" style="height: 50px">Post 3</div>
<div class="post">Post 4</div>
<div class="post">Post 5</div>
<div class="post">Post 6</div>
<div class="post">Post 7</div>
</div>
The code below displays 3 columns, each with an image and text that resize down on a smaller screen and finally to 1 column on a smartphone. There are 2 problems : 1/ on the smallest screen, the image is too big and 2/ the text is under the image (like on the big screen) but I want it on the side of the image (half size of the smallest screen).
I looked at many example, but I can not find something simple...
How can I achieve this easily with Bootstrap?
<div class="container BSC_Angel">
<div class="row">
<div class="col-md-12 text-center">
<div class="col-sm-4 text-center" style="">
<div>image 1</div>
<div>text 1</div>
</div>
<div class="col-sm-4 text-center" style="">
<div>image 2</div>
<div>text 2</div>
</div>
<div class="col-sm-4 text-center" style="">
<div>image 3</div>
<div>text 3</div>
</div>
</div>
</div>
</div>
You can use CSS Flexbox.
Have a look at this Codepen.
Or have a look at the snippet below (use full screen to view this properly):
.content-holder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 20px 0;
}
/* On Mobiles (screen width <= 767px) */
#media screen and (max-width: 767px) {
.content-holder {
flex-direction: row;
}
.text-div {
margin-left: 10px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container BSC_Angel">
<div class="row">
<div class="col-md-12 text-center">
<div class="col-sm-4 text-center" style="">
<div class="content-holder">
<div class="img-div"><img src="http://placehold.it/100x100" alt=""></div>
<div class="text-div">Text 1</div>
</div>
</div>
<div class="col-sm-4 text-center" style="">
<div class="content-holder">
<div class="img-div"><img src="http://placehold.it/100x100" alt=""></div>
<div class="text-div">Text 2</div>
</div>
</div>
<div class="col-sm-4 text-center" style="">
<div class="content-holder">
<div class="img-div"><img src="http://placehold.it/100x100" alt=""></div>
<div class="text-div">Text 3</div>
</div>
</div>
</div>
</div>
</div>
Hope this helps!