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
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 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>
I have this structure in bootstrap columns:
And I want you to change to a lower resolution, be ordered as follows:
I found how to do it with flexbox here:
Flexbox: reorder and stack columns
But I can not change the entire structure of my project to flexbox, so I want to know if with bootstrap 4, it is possible to do so.
Thank you very much.
My poor test.
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );
div {
text-align: center;
height: 60px;
}
#left {
background: yellow;
}
#middle {
background: blue;
}
#right {
background: coral;
}
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3">
<div id="left">COLUMN 1</div>
</div>
<div class="col-sm-6 col-md-6">
<div id="middle">COLUMN 2</div>
</div>
<div class="col-sm-3 col-md-3">
<div id="right">COLUMN 3</div>
</div>
</div>
</div>
You can use the Bootstrap 4 (alpha 6) utility classes to avoid the extra CSS. 1-2-3 becomes 3-2-1 on mobile.
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-6 push-md-3">
<div id="middle">COLUMN 2</div>
</div>
<div class="col-sm-4 col-md-6">
<div class="row">
<div class="col-md-6 pull-md-12 flex-last flex-md-unordered">
<div id="left">COLUMN 1</div>
</div>
<div class="col-md-6">
<div id="right">COLUMN 3</div>
</div>
</div>
</div>
</div>
</div>
http://codeply.com/go/GIcPuzURbs
I assume by "resolution" you mean smaller screen size?
Here's a possible solution that uses some bootstrap push/pull grid utilities to reorder the columns in a medium size viewport, and then rearrange the layout in small size viewport the way you've shown in your diagram. In the small screen view, within a media query I use the css property order to reorder the 1 and 3 columns vertically Hope it gets you on the right track
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-6 push-md-3">
<div id="middle">COLUMN 2</div>
</div>
<div class="col-sm-4 col-md-6">
<div class='row'>
<div id='leftcont' class="col-md-6 pull-md-12">
<div id="left">COLUMN 1</div>
</div>
<div id='rightcont' class="col-md-6">
<div id="right">COLUMN 3</div>
</div>
</div>
</div>
</div>
</div>
CSS:
div {
text-align:center;
height:60px;
}
#left{background:yellow;}
#middle {background:blue;}
#right {background:coral;}
#media (max-width: 768px) {
#leftcont { order: 2; }
#rightcont {
order: 1;
margin-bottom: 1em; }
}
New fiddle
The height of the divs might have to be adjusted for grid breakpoints but since the colored divs were only for a test, i didn't match those to your example
have you tried to pull column 2 for lower resolution?
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!
I'm trying to wrap some column style divs in a row. Then apply overflow:hidden; to the row to make whatever floated columns are in the next row line up.
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
</div>
<div class="row">
<div class="col">Column 3</div>
<div class="col">Column 4</div>
</div>
<div class="row">
<div class="col">Column 5</div>
<div class="col">Column 6</div>
</div>
Then use:
.row{ overflow:hidden; }
.col{
width:50%;
float:left;
}
The problem is, on a larger screen I want to effectively move the row divs so I can show 3 columns:
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>
<div class="row">
<div class="col">Column 4</div>
<div class="col">Column 5</div>
<div class="col">Column 6</div>
</div>
And use:
.row{ overflow:hidden; }
.col{
width:33%;
float:left;
}
Now, I know this can't be done in CSS, but are there any other ways for wrapping columns or getting this effect using CSS which I can use? The best I've come up with is a rather ugly version using extra elements:
http://codepen.io/djave_co/pen/EIHzt
If you resize the screen you can see its working, but its not very neat or semantic.
Do you want to achieve something like that? -> http://codepen.io/anon/pen/LwutG
CSS
.clear {clear: both;}
.col{
border:2px solid #eaeaea;
min-height:20px;
margin-bottom: 10px;
width:100%;
float:left;
box-sizing:border-box;
}
#media screen and (max-width:1400px) {
.col {
width: 33.333333%;
}
}
#media screen and (max-width:800px) {
.col {
width: 50%;
}
}
UPDATE
Set height equal on all cols. http://jsfiddle.net/C86b8/