Is it possible to create a cascading grid layout akin to Masonry or Bootstrap v4 card columns with Semantic UI?
As per this issue, it seems to not be supported directly, but can be achieved via the column-count CSS property.
Here's an example linked in the same issue. In short, you would create a normal Semantic UI grid, give it an extra class, e.g. masonry and then apply the following additional CSS to it (this would apply to a three column grid):
.masonry.grid {
column-count: 3;
display: block;
}
That said, the variable number of columns that Masonry provides does not seem to be possible via this method.
Related
I need to do a layout dynamically on nextjs, with 3 columns of 3 rows and so on.
Actually I use flexbox. Is it possible to do this with flexbox, Reactbootstrap or some CSS only ?
To achieve the basic 3x3 shape with auto-wrapping I would use a simple css flexbox using:
flex-direction: column
flexwrap: wrap
(and limit the height to decide where items start wrapping)
Then to achieve the multiple 3x3's I think there's no way to do it in plain css, but you can simply devide the list of items into groups of 9 using js (react side) and render the 3x3 as multiple times as I said before.
For more information on flexbox, I'd recommend the css-tricks article on it:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I've been struggling to find a way to build this layout. All elements have unknown heights except for the social elements. The related and latest elements are optional.
I'd like to do it without resorting to JS or duplicating elements but I'm actually not sure if it's even possible.
Mobile and tablet are very easily handled with flexbox and the "order" property. I thought I could handle the desktop layout by reverting to floats but since the element heights are unknown this isn't guaranteed ( i.e. the latest and/or related elements might float over to the left if the body copy is short ).
Any ideas? Or should I just suck it up and dynamically add a sidebar to the DOM with JS for the desktop breakpoint?
Edit: Note the order of the elements! If I place the desktop sidebar elements in a container I can no longer re-order them on mobile/tablet with flexbox. Also, I don't believe grid-layout applies since the desktop layout does not follow a grid pattern.
Two-dimensional page layout like this is what CSS Grid was designed for. Flexbox is more suitable to arrange items in one dimension (although a second dimension will easily follow when nesting or wrapping). As others have mentioned, this layout should be totally accomplishable with CSS only.
One approach using CSS Grid is having three template area definitions that change on each breakpoint, as demonstrated here.
Part of the HTML and SCSS for that:
<div class="grid">
<div class="area social"></div>
<div class="area body-social"></div>
<div class="area categories"></div>
<div class="area related-latest"></div>
</div>
.area {
&.social { grid-area: social; }
&.body-social { grid-area: body-social; }
&.categories { grid-area: categories; }
&.related-latest { grid-area: related-latest; }
}
#media (min-width: 64em) {
.grid {
grid-template-areas:
"body-social social"
"body-social categories"
"body-social related-latest";
}
}
I took the liberty of combining some of your sections into areas, as I’m unaware whether the visual design would disallow it. You might have to manage some additional gutters if it does. Also note that the right column in the wide layout is currently only sized to the length of the text inside, which will probably not hold with real content. There will be more use cases I haven’t addressed, but if anything my example can be a starting point for you to work from.
A slightly different approach would be to define grid-template-columns and grid-template-rows for each breakpoint, and configure the correct grid-columns and grid-rows for each area or section. This would imply some more explicit sizing, which has pros and cons in itself.
Furthermore, you would need to think about which layout you want to present to people using a browser without support for CSS Grid.
To learn more about modern layout techniques in CSS, I recommend checking out the articles and videos by Rachel Andrews and Jen Simmons.
Let me know if you have additional questions or remarks.
I'm working on a page with a pretty simple layout - basically a data table, but using grid layout so that the columns will adjust nicely depending on content size. I want to make the rows sortable (using jQuery), so I need to find a way to wrap all the cells of a same row in a container.
display: subgrid;
I've tried using subgrid but it seems it's not much supported at the moment.. Obviously, just nesting a grid doesn't work as it won't sync the column sizes between different grids..
Any idea on how to achieve that?
Here is my pen so far: https://codepen.io/anon/pen/PEjqgx
Depending on the context, display: contents may be a viable workaround for display: subgrid.
From caniuse: (bold mine)
display: contents causes an element's children to appear as if they
were direct children of the element's parent, ignoring the element
itself. This can be useful when a wrapper element should be ignored
when using CSS grid or similar layout techniques.
The big win here is that we can keep our current markup - which groups together each row of data - while keeping components of each row synced together because they are part of just one CSS grid - the grid container.
Regarding browser support: display: contents is supported by Chrome, Firefox and iOS 11.4+.
So getting back to the OP's sample Codepen, we can make use of display: contents to implement the desired result by:
1) Moving the grid container properties to the globalWrapper div and
#globalWrapper {
display: grid;
grid-template-columns: 1fr 1fr max-content;
grid-gap: 3px;
}
2) setting the rowWrapper divs with display: contents
.rowWrapper {
display: contents;
}
Updated Codepen demo
Using display:contents to simulate css subgrid is a hack: hacks add complexity — making the code harder to maintain and prone to other errors — and sooner or later they will stop working.
Beware of using display:contentsas a substitute for subgrid: there are good reasons why it should be avoided. Instead use either another Grid in the container element or Flex.
[Adendum 11/1/2020] Firefox supports Subgrid since V71, no word yet from the other browsers. There is a good explanations about the feature in codrops, and you can see some examples here. And this is the link to see the current support in all of the browsers in can I use
[Adendum 06/06/2022] Apple announces subgrid support for Safari 16
I want to create masonry layout using css only, i read all tutorial in internet, but they using column property to divide layout, the problem in here is the layout will be display like this (with 1,2,3...is a items).
1|3|5
2|4|6
I want my layout must be:
1|2|3
4|5|6
I want use css only.Please tell me if you have any solution or idea to resolve this problem.
You can use flexbox. See codepen for example, and complete guide to flex box to learn more.
In order to keep the layout horizontal, adjust the flex-direction to your liking.
This is very similar to Bootstrap 3 fluid grid layout issues? and Bootstrap responsiveness view but the options for masonry and isotope, while attractive, aren't an option as I must retain ordering for the elements.
From the linked questions, I've moved a fair bit of the way forward using the clearfix class application as can be seen at http://bootply.com/103688. The clearfix divs are left unindented so they stand out more.
I also found that undesirable results will occur if, as is my case, I am only using some of the column sizes (xs, md, lg). This necessitates that the clearfix also specify the visible-sm or, when the viewport reaches the "small" size, the clearfix is no longer visible, and problematic stacking recurs.
Applying them is simple enough, as this is a real-world fizzbuzz problem, but it seems anti-DRY. Is there a cleaner way for me to do this, with less repetition of the clearfix tags? Some means of having the browser (CSS) compute where the clearfix should be applied?
You can use an manual approach of creating rows according with the number of elements per breaking point. For example:
If you have a row with 2 elements only:
#media(max-width: #screen-tablet){
// create rows (clearfix)
.col-xs-6:nth-of-type(odd){ clear:left; }
}
or if your rows contains 4 elements
#media(min-width: #screen-tablet) and (max-width: #screen-desktop){
// create rows (clearfix)
.col-sm-4:nth-of-type(3n+1){ clear:left; }
}
etc..