Sorting divs in grid format using only CSS - css

I have a problem in sorting the div(s), i have two types a, b
a - should always be at the front (all a types)
b - should be following all a types.
HTML:
<div class="" style="">
<div class="a">a</div>
<div class="a">a</div>
<div class="b">b</div>
<div class="a">a</div>
</div>
CSS:
.a, .b {
display:inline-block;
width:50px;
height:50px;
padding:15px;
margin:5px;
}
.a {
float:left;
background-color: blue;
}
.b { background-color: red; }
This seems to work fine in a line:
But breaks as a grid:
Desired result (number of boxes is irrelevant):
JsFiddle: http://jsfiddle.net/kQkn9/
How would i go about fixing this problem?

If you're looking for a pure CSS solution, your only option is to use Flexbox.
http://jsfiddle.net/kQkn9/2/
.container { /* parent element */
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#supports (flex-wrap: wrap) {
.container {
display: flex;
}
}
.a, .b {
display: inline-block;
width: 50px;
height: 50px;
padding: 15px;
margin: 5px;
}
.a {
background-color: blue;
}
.b {
-webkit-flex-order: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
background-color: red;
}
Browser support: Chrome, Opera, IE10. http://caniuse.com/#feat=flexbox

don't believe this is possible with CSS and HTML alone. My recommendation would be to sort the a's and b's, without changing your css as you have it then re-insert them into the DOM in their new, sorted order.
something to this effect: (in JQ)
var listOfAs = $('.a').clone();
var listOfBs = $('.b').clone();
var parent = $('.a').first().parent('div');
$('.a, .b').remove();
parent.append(listOfAs);
parent.append(listOfBs);
I know this is a touch cumbersome and not super 'responsive' but as i said, don't think its possible with CSS alone...this is just a quick-and-dirty implementation to get you started.
PS: updated your fiddle http://jsfiddle.net/kQkn9/6/
EDIT: clearly this IS possible in newer browsers (thanks to #cimmanon). If you need to support older browsers, you'll have to do something like this (which is definitely less cool)

Related

Switch images on hover in CSS

I have a grid created in CSS (of which only one of the items is shown in the code below)
CSS:
/* Grid 1 START*/
.grid-1 {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: auto quto auto;
grid-gap: 4px;
}
/* Grid 1 END*/
Html:
<div class="item-1"><img class="alignleft wp-image-5497 size-full" src="image#1.png" alt="" width="300" height="200" /></div>
If on hovering the mouse over the image#1, I need to replace the image#1 (on hover only) to image#2 what would the code be to add into the lines above?
Any help would be appreciated. There are other "items" in the grid but I have shown only one line of code to keep it simple.
This isn't really a css-grid question, as most of the solutions would be completely independent of the layout.
But #Paulie_D is right - CSS can't change the html code. You'd either need the image already on the page, or use javascript to swap in the src of the new image. Or use background-image properties on the a element instead of using img elements.
But just adding the 'on-hover' img to the grid (immediately alongside the 'non-hover' img) and hiding / unhiding with css is probably the easiest, fastest solution:
<a href="/">
<img src="https://via.placeholder.com/300x200/b4c833/000000?text=Image+1" class="img1"/>
<img src="https://via.placeholder.com/300x200/000000/b4c833?text=Image+2" class="img2"/>
</a>
<style>
img {
display: block;
}
img + img {
display: none;
}
a:hover img {
display: none;
}
a:hover img + img {
display: block;
}
</style>
I'm using broad selectors here... You'd probably want to be more specific. Assuming the same code structure from the example you provided, this should be sufficient:
.grid-1 img {
display: block;
}
.grid-1 img + img {
display: none;
}
.grid-1 a:hover img {
display: none;
}
.grid-1 a:hover img + img {
display: block;
}
Also, you have a typo in your question that's also present in your example code:
grid-template-rows: auto quto auto; should be grid-template-rows: auto auto auto; (note the second auto)

How to create 2 column layout with second DIV with infinite width

How to create this kind of layout with CSS without complex use of position:absolute
(looking for simple methods). Consider also a "responsiveness" of the page.
Any ideas?
Thank you
Check out this post for why Flexbox is the best: http://uidevdaily.com/2018/why-you-should-start-using-flexbox/. I made a Jsfiddle to answer your question: https://jsfiddle.net/q6ac134L/13/. Below is the CSS code:
div {
height: 100vh;
}
.main-container {
display: flex;
}
.col-1 {
background-color: green;
flex-basis: 100px;
}
.col-2 {
background-color: gray;
flex: 1;
}

CSS tables displaying strangely

I am trying to get two columns of content the same height using the CSS tables method. However, for some reason, the first column has extra padding at the bottom, the second column has extra padding at the top.
I am using the same code I usually do and cannot find the source of the problem when inspecting the code. I have double checked my code and look at other examples but cannot find the cause of this problem.
The code I am using is:
.archive-post{
display:table;
vertical-align: top;
padding:20px 0px;}
.archive-post .left-column{
display:table-cell;
width:60%;}
.archive-post .right-column{
display:table-cell;
width:40%;
padding-left:20px;}
Or you can see a live link here.
Use vertical align
.archive-post .left-column,
.archive-post .right-column {
vertical-align: top;
}
This should to the trick.
Just a small idea.. have you tried flexbox, for that? It's really a simple and easiest way to do that. Plus you can use position:absolute; inside the columns (display:table and display:table-cell do not allow that).
* {
box-sizing: border-box;
line-height: 2;
}
main {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 1.25em 0em;
}
section {
background-color: #ccc;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
aside {
background-color: #ccc;
margin-left: 20px;
width: 40%;
}
<main>
<section>
left column.<br>higher then the other
</section>
<aside>
right column
</aside>
</main>

Reorder div table-cells using media queries

I have a div table with two cells. Now I want to show the second cell at the top and the first cell at the bottom of page, when my page is displayed on a smartphone:
<div class="table">
<div class="cell1"></div>
<div class="cell2"></div>
</div>
.table {
display: table;
}
.table .cell1,
.table .cell2 {
display: table-cell;
}
#media (max-width: 480px) {
.table .cell1,
.table .cell2 {
width: 100%; // must be full width on smartphones
display: block;
}
// how to display cell2 at top and cell1 at bottom?
}
I tried to add float properties like float: left and float: right, but it doesn't work.
PS
I cannot just remove table layout and only use floats. There is a reason it must be displayed as table on desktop.
You can do this with the flexbox model. The new flexbox model is not yet widely supported (especially not by older browsers, as the specification has changed recently), but since you mention that it is meant to work on smartphones, this solution might do the trick for you.
I believe most smartphone browsers would support this solution, the one browser which I am not so sure about is Windows Phone 8's version of IE10, IE10 does support this approach, but I'm not sure if the Windows Phone 8 version of IE10 behaves exactly the same as the desktop version.
Setting the variously prefixed display property value and the flex-direction property on the containing element ensures that the container behaves like a flex box in a column direction.
Setting the variously prefixed order property to 1 on .cell1 ensures that the initial value of 0 on .cell1 is overwritten, and therefore it pushes cell1 past .cell2 in the order, as its order value is higher than cell2's order value (which is still equal to its initial value of 0).
Here's a jsFiddle demonstrating this approach.
CSS:
.table {
display: table;
}
.table .cell1, .table .cell2 {
display: table-cell;
}
#media (max-width: 480px) {
.table {
display: -webkit-box;
-webkit-flex-direction: column;
display: -moz-box;
-moz-flex-direction: column;
display: -ms-flexbox;
-ms-flex-direction: column;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.table .cell2, .table .cell1 {
width: 100%;
display: block;
}
.table .cell1 {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
}

css flexbox equal height columns not working

I am trying to get css3 flexbox working (for the first time) to make equal height columns (for those browsers that support it).
I have seen various examples across the web but I cant get any to work.
Here is my code (followed by a jsfiddle link)
<div>
<span><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p></span>
<span>col2</span>
<span>col3</span>
</div>
div { background:red; float:left;
-webkit-display:flex;
-moz-display:flex;
display:flex;
}
span { display:block; background:yellow; float:left; width:100px; margin:0 10px;
-webkit-flex:1;
-moz-flex:1;
flex:1;
}
http://jsfiddle.net/38kbV/
Any pointers would be greatly appreciated.
The float is causing the entire thing to fall apart in Firefox. If you need it to appear inline with other content, you'll need to use the inline display property instead (inline-flex, inline-flexbox, inline-box).
When you're following the modern Flexbox draft, you need to stick with all of the properties that belong to that draft. If you try to mix and match, they won't work as expected. There are 3 different drafts that have been implemented in various browsers, each with different property names and values (see: https://gist.github.com/cimmanon/727c9d558b374d27c5b6)
http://tinker.io/11122/2
div {
background: red;
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
span {
display: block;
background: yellow;
float: left;
width: 100px;
margin: 0 10px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}

Resources