We Keep Coding

CSS Grid two rows nested in a single column

I am looking for a way to allow two rows within a single column while the other two columns to the right of it are equal/flexible to the height of those two rows. The width should be 100% when looking at all three columns (so around 33% each column). Here is an example of how I want it to look:
https://i.imgur.com/lLPzXhS.png
I will be filling those boxes with clickable boxes like shown below:
https://i.imgur.com/uyyDbL7.png
I have tried using display: row, display: cell, but I am not able to add any margins to it so this is the product I get:
https://i.imgur.com/Ok6EgT0.png
You can see that I have somewhat of the grid system set up, but not as ideally as I want it. There are no margins that can be set between the red and orange box, even though I am able to add margins to the turqoise and blue box.
Here is the code I have:
HTML:
<div class='d-table'>
<div class='t-row'>
<div class='t-cell one-third'>
<div class='turqoisebox'>
Turqoise box here
</div>
<div class='bluebox'>
Blue box here
</div>
</div>
<div class='t-cell one-third redbox'>
Red box here
</div>
<div class='t-cell one-third orangebox'>
Orange box here
</div>
</div>
</div>
CSS:
.d-table {
display: table;
}
.t-row {
display: table-row;
}
.t-cell {
display: table-cell;
margin-left: unset;
margin-right: unset;
/*border: 1px solid tomato;*/
}
.one-third {
width: 30%;
}
.two-thirds {
width: 200px;
}
.bluebox {
background-color: #9dd8dd;
margin: 25px;
border-radius: 25px;
border: solid #7dacb0;
border-width: 3px;
box-shadow: 2px 4px 8px 2px rgba(0,0,0,0.4);
transition: 0.3s;
text-align: center;
}
.bluebox:hover {
box-shadow: 2px 8px 16px 2px rgba(0,0,0,0.8);
}
Any thoughts on how to replicate the second image results neatly?

You could use flexbox. Take a look at this simplified example:
.content {
background: orange;
margin: 1rem;
padding: 1rem;
flex: 1;
color: white;
display: flex;
}
.content > span {
margin: auto;
}
.row {
display: flex;
flex-direction: row;
background-color: blue;
flex: 1
}
.col {
display: flex;
flex-direction: column;
flex: 1;
background-color: red;
}
<div class="row">
<div class="col">
<div class="row">
<div class="content">
<span>This is centered</span>
</div>
</div>
<div class="row">
<div class="content">
<span>This is centered</span>
</div>
</div>
</div>
<div class="col">
<div class="content">
<span>This is centered</span>
</div>
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
</div>
<div class="col">
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
<div class="content">
<span>This is centered</span>
</div>
</div>
</div>
You could also use a minimal flexbox-based grid library like Flexbox Grid.

Margin is used for setting where elements should start so instead use padding between those 2 elements to get the space you want.

How can I match bootstrap column heights with pure jQuery?

I know there is a library called match-height.js that already does this for you but I'm trying to do it from scratch. I have row with 2 columns, the first one has a centered (horizontally and vertically) black square. The second column has a heading and a paragraph. I just want to match the heights of the columns with the class "about-wrapper".
HTML:
<div class="container-fluid" id="about-section">
<div class="row">
<div class="col-md-4 about-wrapper" id="about-logo-wrapper">
<div id="about-logo"></div>
</div>
<div class="col-md-8 about-wrapper" id="about-text-wrapper">
<h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
<p class="main-body" id="about-body">
Paragraph content goes here...
</p>
</div>
</div>
</div>
CSS:
#about-logo-wrapper {
display: flex;
justify-content: center;
padding: 0px;
margin-bottom: 50px;
border: 3px solid red;
}
#about-logo {
height: 200px;
width: 200px;
max-width: 300px;
background: black;
margin: 0px auto;
align-self: center;
}
jQuery:
$(document).ready(function(){
$("#about-logo-wrapper").height = $("#about-text-wrapper").height;
});

You're using height() wrong. It's a function, not a property, and it takes a parameter when you want to use it to set height...
$(document).ready(function(){
$("#about-logo-wrapper").height($("#about-text-wrapper").height());
});
See the documentation for more info...
http://api.jquery.com/height/

I think you need first to check which height is greater: either left cell or right one:
var h = $("#about-text-wrapper").height() > $("#about-logo-wrapper").height() ?
$("#about-text-wrapper").height() :
$("#about-logo-wrapper").height();
then set this height to about-wrapper
$(".about-wrapper").height(h);
Look at snippet in full page mode:
var h = $("#about-text-wrapper").height() > $("#about-logo-wrapper").height() ? $("#about-text-wrapper").height() : $("#about-logo-wrapper").height();
$(".about-wrapper").height(h);
#about-logo-wrapper {
display: flex;
justify-content: center;
padding: 0px;
margin-bottom: 50px;
border: 3px solid red;
}
#about-logo {
height: 200px;
width: 200px;
max-width: 300px;
background: black;
margin: 0px auto;
align-self: center;
}
#about-text-wrapper {
border: 3px solid green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" id="about-section">
<div class="row">
<div class="col-md-4 about-wrapper" id="about-logo-wrapper">
<div id="about-logo"></div>
</div>
<div class="col-md-8 about-wrapper" id="about-text-wrapper">
<h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
<p class="main-body" id="about-body">
Paragraph content goes here...
</p>
<h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
<p class="main-body" id="about-body">
Paragraph content goes here...
</p>
<h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
<p class="main-body" id="about-body">
Paragraph content goes here...
</p>
</div>
</div>
</div>
CSS:

Creating a responsive div with complex objects

I am creating an admin panel with charts/images, etc.
I am failing to make it responsive.
All images are svg's, I used charts.js framework to create the pie chart.
This is an example of a div I have
This is the html:
<div class="row">
<div class="col-md-6">
<div class="alerts-chart-wrapper">
<canvas id="alertsChart" style="float: left;"></canvas>
</div>
</div>
<div class="col-md-6">
<div class="row alert-row">
<div class="entitys-icons icon-1"> </div>
<div class="alert-entity-name"> Users </div>
<div class="entity-alerts-count">28</div>
</div>
...(3 more rows)
</div>
</div>
The css:
.alert-row {
padding: 0% 15% 3% 5%;
}
.entitys-icons {
background: url('/Areas/WebApp/app/main_page_assets/02_general_alerts_icons.svg');
background-repeat: no-repeat;
width: 33px;
height: 33px;
background-size: 77px;
float: left;
}
.entitys-icons.icon-1 {
background-position: 0 2px;
}
.alert-entity-name {
float: left;
font-size: 0.75em;
vertical-align: middle;
line-height: 35px;
padding-left: 2px;
}
.entity-alerts-count {
float: right;
vertical-align: middle;
line-height: 35px;
padding-left: 2px;
}
.alerts-chart-wrapper {
width: 100%;
}
Now the problem is the circle grows and shrinks depending on the resolution, but the rows arent.
Here is a screenshot of the problem when the width shrinks(the circle and th rows must be aligned):
What is the strategy to use here? I thought maybe i will use media's with fixed size, but the best solution for me is that the rows height will change accordingly.

Inside the head tag, configure the right viewport
<meta name="viewport" content="width=device-width,minimum-scale=1>

You have to use the other grid options to specify the sizes as the screen changes resolution.
http://getbootstrap.com/css/#grid
For mobile you'll want to use the .col-sm- prefix.
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="alerts-chart-wrapper">
<canvas id="alertsChart" style="float: left;"></canvas>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-sm-6 alert-row">
<div class="entitys-icons icon-1"> </div>
<div class="alert-entity-name"> Users </div>
<div class="entity-alerts-count">28</div>
</div>
...(3 more **col**)
</div>
</div>
</div>

How to wrap more than one div around a div

I have a div (Slideshow) and I want to wrap around it small divs (Items). The Slideshow div will be static and the Items will be rendered automatically using a Repeater Control.
I made this image to better illustrate what I need to achieve.
I saw this Question and I thought I could use the same logic, let the Repeater items get rendered normally and then change the markup using JavaScript and use some sort of a CSS Grid layout to style the first 4 items for example on the left and the right and the rest will be beneath them but I'm not sure how to do it plus if there's a more simple solution I thought it could be cleaner than using the concept I saw in the question I referred.
Update1: Changed the picture to show the exact desired output

You could generate a Masonary layout. This plug in may be helpful, https://github.com/desandro/masonry
You could do this with bootstrap columns as well. For the first row, with the slideshow, you have 3 columns. The outer left and right columns will have 2 nested rows. http://getbootstrap.com/examples/grid/. This is what Im most familiar with so I'll show you how I would implement a solution for the first row and how to implement a second row with 4 columns.
<div class="row">
<!-- Outer Left Column -->
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
Item
</div>
</div>
<div class="row">
<div class="col-xs-12">
Item
</div>
</div>
</div>
<div class="col-xs-12">
Slide Show
</div>
<!-- Outer Right Column -->
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
Item
</div>
</div>
<div class="row">
<div class="col-xs-12">
Item
</div>
</div>
</div>
</div>
<!-- Row With Four Items -->
<div class="row">
<div class="col-xs-3">
Item
</div>
<div class="col-xs-3">
Item
</div>
<div class="col-xs-3">
Item
</div>
<div class="col-xs-3">
Item
</div>
</div>
Checkout the angular material layout system as well. This will be harder to implement though because it requires Angular. https://material.angularjs.org/latest/#/layout/grid

Check this solution out and see if you can adopt it to your project: http://jsfiddle.net/1b0hoked/.
HTML:
<div id = "wrapper">
<div id = "slideshow"></div>
</div>
CSS:
*, :before, :after {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
body {
padding: 10px;
}
#wrapper {
counter-reset: item-counter;
text-align: right;
margin: 0 auto;
display: table;
outline: 1px solid gray;
position: relative;
}
#slideshow {
width: 210px;
height: 210px;
line-height: 210px;
text-align: center;
border: 2px solid red;
position: absolute;
top: 5px;
left: 50%;
margin-left: -105px;
}
#slideshow:before {
content: "Slide Show";
vertical-align: middle;
font: bold 16px/1 Sans-Serif;
color: red;
}
.item {
height: 100px;
width: 100px;
text-align: center;
line-height: 96px;
border: 2px solid #aaa;
}
.item:before {
counter-increment: item-counter;
content: "item " counter(item-counter);
vertical-align: middle;
font: bold 12px/1 Sans-Serif;
color: #aaa;
}
.item {
float: left;
margin: 5px;
}
.item:nth-of-type(4n + 1) {
clear: left;
}
.item:nth-of-type(3) {
float: right;
margin-top: -105px;
}
.item:nth-of-type(4) {
float: right;
clear: right;
margin-left: -105px;
}
.item:nth-of-type(2) {
clear: left;
}
JS/jQuery:
$(function() {
var numToAdd = 50;
while(--numToAdd >= 0) {
$("</p>").addClass("item").appendTo("#wrapper");
}
});

DIV's reorder by themselves upon expand - how do I keep the same order?

I've got a grid of items that upon click expand to show a table below it. It works fine, but it reorders the DIV's positions as per my illustration below.
I need them to keep their respective position in their "columns".
Here's the illustration to make it clear:
And here is my HTML code:
<div
class="item-component"
ng-controller="CollapseCtrl"
ng-repeat="component in components.components | filter : components.filterByFilter | filter : searchText"
>
<div class="component-wrapper" ng-click="isCollapsed = !isCollapsed">
Item - click to expand
</div>
<div class="codes-wrapper" collapse="isCollapsed">
<table class="table table-striped table-condensed">
Expanded content here
</table>
</div>
</div>
And here is the .item-component class:
.item-component {
width: 33.33333333333333%;
float: left;
padding-left: 15px;
}
How would I achieve the "expected result" in my illustration?

Use display:inline-block instead of float:left on your .item-component
Living Demo
.item-component {
width: 33.33333333333333%;
display: inline-block;
padding-left: 15px;
}
Or, you can take a look at BootStrap and do it by using the :before element maintaning the float:left as you had it before.
You would also need to wrap each row:
.col{
float:left;
width: 32.33%;
min-height: 50px;
background: #ccc;
padding: 20px;
box-sizing: border-box;
}
.row{
display:block;
}
/* This do the trick */
.row:before{
content: " ";
display: table;
box-sizing: border-box;
clear: both;
}
Living example
Update
If you don't want the gap you will have to look for another HTML markup. You will have to print first each column with each rows.
This is the needed html markup:
<div class="col">
<div class="row" id="demo">1</div>
<div class="row">4</div>
<div class="row">7</div>
</div>
<div class="col">
<div class="row">2</div>
<div class="row">5</div>
<div class="row">8</div>
</div>
<div class="col">
<div class="row">3</div>
<div class="row">6</div>
<div class="row">9</div>
</div>
And the needed css:
.col{
float:left;
width: 32.33%;
}
.row{
display:block;
padding: 20px;
box-sizing: border-box;
background: #ccc;
min-height: 50px;
}
#demo{
height: 150px;
background: red;
}
Living demo

You can do it in the following way.
HTML:
<div class="container">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<br class="clear" />
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<br class="clear" />
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
<div>
CSS:
.col {
float: left;
width: 100px;
min-height: 100px;
background: #ccc;
padding: 20px;
margin: 10px;
cursor: pointer;
}
.col:hover {
background: yellow;
}
JS:
$('.col').click(function() {
if ($(this).is('.clicked')) {
$(this).removeClass('clicked');
} else {
$(this).addClass('clicked')
}
});
Live demo: http://jsfiddle.net/S7r3D/1/
ETA: the problem with this solution is that it moves entire row down. I don't really see how to nicely achieve what you want...You could try to overflow the other divs, but it depends on your needs. Is such solution acceptable?
ETA2: actually I made it perfect I think! Have a look here: http://jsfiddle.net/S7r3D/3/
The crucial change was rearranging divs and putting them in columns instead.
HTML:
<div class="container">
<div class="fleft">
<div class="col">1</div>
<div class="col">4</div>
<div class="col">7</div>
</div>
<div class="fleft">
<div class="col">2</div>
<div class="col">5</div>
<div class="col">8</div>
</div>
<div class="fleft">
<div class="col">3</div>
<div class="col">6</div>
<div class="col">9</div>
</div>
<div>
CSS:
.col {
clear: both;
width: 100px;
min-height: 100px;
background: #ccc;
padding: 20px;
margin: 10px;
cursor: pointer;
}
.col:hover {
background: yellow;
}
.col.clicked {
height: 300px;
background-color: red;
}
.fleft
{
float: left;
}
JS: /* same as above */

Create three container divs, and afterwards, put {1, 4, 7} into div1, {2, 5, 8} into div2, and {3, 6, 9} into div3.
Otherwise you will have it very difficult to control their positioning.