Custom Css Grid with Vanilla Css (No Framework) - html

I'm trying to get a div element that is split in half and in one of the halfs, have 4 equal square boxes.
So far I think I have the initial set up but when I try to produce the 4 squares within one of the halfs one overflows past the other leaving both halfs not equal. I hope the code snippet might help
<!DOCTYPE html>
<html>
<head>
<title> Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
border: 0;
background: gray;
min-width: 100%;
}
.container {
min-width: 100%;
margin: 0 auto;
padding: 4px ;
}
[class*="col-"] {
float: left;
padding: 0;
margin: 0;
border: 0;
width:inherit
}
/* GRID SYSTEM */
.row::after {
content: '';
clear: both;
display: block;
}
#media only screen
and (min-width : 300px)
and (max-width : 640px) {
.col { float: left;}
.col { float: left;}
.mobile-not {
display:none;
}
}
#media only screen
and (min-width: 768px) {
.col { float: left;}
.col-6-md { width: 50%; }
}
#media only screen
and (min-width : 1224px) {
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-2-sm {width: inherit; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-6-md {
display:block;
width: inherit;
}
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }
}
img {
width: 100%;
}
.text-demo {
background-color: #0099ff;
}
.text-prop {
padding-right: 20px;
color:white;
text-align: right;
width:100%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<a href="/search/">
<img src="https://lh3.googleusercontent.com/xVYh_uJU1fipLAg85BABZvd5rmSTCg-lSFkZR78jP9lCNxjVRHF8dcIkRE_sGh7ReMWs0xo0azaV-nnCsZ-BVbPBVEjZuVi6uojDNHaDlohDCNM2hGL02nASyMhhdWH5yZ6ZjKF2di8IC6HCkDS-VZ5UBb4eryKcmtbKvpDRm7q-knmu_C9GQx3CsNjQIkZhpmoI6asAlrs_DkJK2hgLN_n-lXFBhLDEQnnYMWR1iYLa3yePtSPVHSzzKOODpNPQqZM9oVtNRizEIysesic__qzrHW0bSmEANsnhutwK--2Cs4jc96isl0XQdKfsqTHzcG_Nc5g2-gIegFHnDWYxsh-KgqLtizc4VaBB2oe1BhUN98pIblCkSVgr88PNSPzeqdF6Dz1fjxCqbD1uvuhfPlhiDmcrmLFyf9fzqYzQtOFLyZuojLohGjivsMYhUkSdghen7XkkdvJx-6lK9baVw4kHXp7M1ZbufApnT8wb1PPBmA8Y1TqkeRQkIfBnEbX5G6VWRNiq0AIOWwkvJSwxGLlwL7Kuh7p77JbTqyn-0w1ydDq80bmFKtvnvnf2AQEvmuTFdgSiFAMWJbYlb5o8_nnuGvATqmCd57DanPW8mOsrULpfaTHi=w468-h379-no">
</a>
</div>
<div class="col-6">
<div class="col-2-sm">
<a href="/search/">
<img src="https://lh3.googleusercontent.com/xVYh_uJU1fipLAg85BABZvd5rmSTCg-lSFkZR78jP9lCNxjVRHF8dcIkRE_sGh7ReMWs0xo0azaV-nnCsZ-BVbPBVEjZuVi6uojDNHaDlohDCNM2hGL02nASyMhhdWH5yZ6ZjKF2di8IC6HCkDS-VZ5UBb4eryKcmtbKvpDRm7q-knmu_C9GQx3CsNjQIkZhpmoI6asAlrs_DkJK2hgLN_n-lXFBhLDEQnnYMWR1iYLa3yePtSPVHSzzKOODpNPQqZM9oVtNRizEIysesic__qzrHW0bSmEANsnhutwK--2Cs4jc96isl0XQdKfsqTHzcG_Nc5g2-gIegFHnDWYxsh-KgqLtizc4VaBB2oe1BhUN98pIblCkSVgr88PNSPzeqdF6Dz1fjxCqbD1uvuhfPlhiDmcrmLFyf9fzqYzQtOFLyZuojLohGjivsMYhUkSdghen7XkkdvJx-6lK9baVw4kHXp7M1ZbufApnT8wb1PPBmA8Y1TqkeRQkIfBnEbX5G6VWRNiq0AIOWwkvJSwxGLlwL7Kuh7p77JbTqyn-0w1ydDq80bmFKtvnvnf2AQEvmuTFdgSiFAMWJbYlb5o8_nnuGvATqmCd57DanPW8mOsrULpfaTHi=w468-h379-no">
</a>
</div>
<div class="col-2-sm mobile-not">
<div class="text-demo">
<div class="text-prop">
<br>
<font size="3.5"> <strong>Wcsho </strong> </font><br>
<font size="6"> <strong>Demo Site </strong><br></font><br>
<font size="3"> SALES: 888-888-1234<br>
SERVICE: 888-888-1234<br>
Custom: 888-888-1234<br>
</font>
<br>
<font size="2">
<a href="/hours-and-directions/">
918 greenville Rd,<br> uk
</a>
</font>
<br><br>
</div>
<br>
</div>
</div>
<br style="clear:both" />
<div class="col-2-sm">
<a href="/search/">
<img src="https://lh3.googleusercontent.com/xVYh_uJU1fipLAg85BABZvd5rmSTCg-lSFkZR78jP9lCNxjVRHF8dcIkRE_sGh7ReMWs0xo0azaV-nnCsZ-BVbPBVEjZuVi6uojDNHaDlohDCNM2hGL02nASyMhhdWH5yZ6ZjKF2di8IC6HCkDS-VZ5UBb4eryKcmtbKvpDRm7q-knmu_C9GQx3CsNjQIkZhpmoI6asAlrs_DkJK2hgLN_n-lXFBhLDEQnnYMWR1iYLa3yePtSPVHSzzKOODpNPQqZM9oVtNRizEIysesic__qzrHW0bSmEANsnhutwK--2Cs4jc96isl0XQdKfsqTHzcG_Nc5g2-gIegFHnDWYxsh-KgqLtizc4VaBB2oe1BhUN98pIblCkSVgr88PNSPzeqdF6Dz1fjxCqbD1uvuhfPlhiDmcrmLFyf9fzqYzQtOFLyZuojLohGjivsMYhUkSdghen7XkkdvJx-6lK9baVw4kHXp7M1ZbufApnT8wb1PPBmA8Y1TqkeRQkIfBnEbX5G6VWRNiq0AIOWwkvJSwxGLlwL7Kuh7p77JbTqyn-0w1ydDq80bmFKtvnvnf2AQEvmuTFdgSiFAMWJbYlb5o8_nnuGvATqmCd57DanPW8mOsrULpfaTHi=w468-h379-no">
</a>
</div>
<div class="col-2-sm">
<a href="/search/">
<img src="https://lh3.googleusercontent.com/xVYh_uJU1fipLAg85BABZvd5rmSTCg-lSFkZR78jP9lCNxjVRHF8dcIkRE_sGh7ReMWs0xo0azaV-nnCsZ-BVbPBVEjZuVi6uojDNHaDlohDCNM2hGL02nASyMhhdWH5yZ6ZjKF2di8IC6HCkDS-VZ5UBb4eryKcmtbKvpDRm7q-knmu_C9GQx3CsNjQIkZhpmoI6asAlrs_DkJK2hgLN_n-lXFBhLDEQnnYMWR1iYLa3yePtSPVHSzzKOODpNPQqZM9oVtNRizEIysesic__qzrHW0bSmEANsnhutwK--2Cs4jc96isl0XQdKfsqTHzcG_Nc5g2-gIegFHnDWYxsh-KgqLtizc4VaBB2oe1BhUN98pIblCkSVgr88PNSPzeqdF6Dz1fjxCqbD1uvuhfPlhiDmcrmLFyf9fzqYzQtOFLyZuojLohGjivsMYhUkSdghen7XkkdvJx-6lK9baVw4kHXp7M1ZbufApnT8wb1PPBmA8Y1TqkeRQkIfBnEbX5G6VWRNiq0AIOWwkvJSwxGLlwL7Kuh7p77JbTqyn-0w1ydDq80bmFKtvnvnf2AQEvmuTFdgSiFAMWJbYlb5o8_nnuGvATqmCd57DanPW8mOsrULpfaTHi=w468-h379-no">
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Any help would be appreciative, I can't figure out how to get everything to fit equally.


Here is an example using flexbox with pure CSS.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.row{
display: flex;
}
.col{
flex: 1;
margin: 0 1rem;
border: 1px solid black;
}
.square{
background-color: red;
flex: 1;
}
.square:after{
content: '';
display: block;
padding-bottom: 100%;
}
<div class="row">
<div class="col"></div>
<div class="col row">
<div class="col square"></div>
<div class="col square"></div>
<div class="col square"></div>
<div class="col square"></div>
</div>
</div>

Related

responsive positioning of elements within a HTML tile

I am building a tiled web page which resizes the position of the tiles to the screen size. At the moment it all works well with a title and image centered in each tile.
i would like to add an input box but would like to position this and other elements with in the tile. i can do this with absolute positioning but when resizing the screen the input box does not move with the tile. How can I go about doing this.
body {
text-align: center;
background-color: #000000;
}
* {
box-sizing: border-box;
}
[class*="col-"] {
float: left;
padding: 5px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
#media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
}
#media only screen and (min-width: 600px) {
.col-m-1 {
width: 8.33%;
}
.col-m-2 {
width: 16.66%;
}
.col-m-3 {
width: 25%;
}
.col-m-4 {
width: 33.33%;
}
.col-m-5 {
width: 41.66%;
}
.col-m-6 {
width: 50%;
}
.col-m-7 {
width: 58.33%;
}
.col-m-8 {
width: 66.66%;
}
.col-m-9 {
width: 75%;
}
.col-m-10 {
width: 83.33%;
}
.col-m-11 {
width: 91.66%;
}
.col-m-12 {
width: 100%;
}
}
.DTile {
border: 2px solid blue;
background-color: #808080;
height: 200px;
}
.DGauge {
font-size: 350%;
color: #0000CD;
}
.DTitle {
color: #0000CD;
font-size: 150%;
}
.DsetTemp {
position: absolute;
left: 150px;
top: 150px;
}
.NTile {
border: 2px solid #7CFC00;
background-color: #808080;
height: 200px;
}
.NGauge {
font-size: 350%
}
.Ntitle {
color: #0000CD;
font-size: 150%;
}
.FTile {
border: 2px solid yellow;
background-color: #808080;
height: 200px;
}
.FGauge {
font-size: 350%
}
.FTitle {
color: #0000CD;
font-size: 150%;
}
.HTile {
border: 2px solid #7CFC00;
background-color: #808080;
height: 200px;
}
.HGauge {
font-size: 350%
}
.HTitle {
color: #0000CD;
font-size: 150%;
}
<div class="row">
<div class="col-3">
<div class="DTile">
<p class="DTitle"> The Den</p>
<div class="DGauge" id="Dtemp"></div>
<img src="" id="Dicon" width="80px" height="30px" vspace="10">
<input class="DsetTemp" type="text" id="DsetTemp" value="" size="2">
</div>
</div>
<div class="col-3">
<div class="FTile">
<p class="FTitle"> Front room</p>
<div class="FGauge" id="Ftemp"></div>
<img src="" id="Ficon" width="80px" height="30px" vspace="10">
</div>
</div>
<div class="col-3">
<div class="HTile">
<p class="HTitle"> Hallway</p>
<div class="HGauge" id="Htemp"></div>
<img src="" id="Hicon" width="80px" height="30px" vspace="10">
</div>
</div>
<div class="col-3">
<div class="NTile">
<p class="NTitle"> Niamh Room</p>
<div class="NGauge" id="Ntemp"></div>
<img src="" id="Nicon" width="80px" height="30px" vspace="10">
</div>
</div>
</div>
ive added a Jpeg image of my actual page. The Front room tile has three elements positioned side by side. This is what i am trying to create

Check Flexbox documentation
$(document).ready(function() {
$("#btn").click(function() {
$("#Create").toggle();
});
});
body {
text-align: center;
background-color: #000000;
}
* {
box-sizing: border-box;
}
[class*="col-"] {
float: left;
padding: 5px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
#media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
}
#media only screen and (min-width: 600px) {
.col-m-1 {
width: 8.33%;
}
.col-m-2 {
width: 16.66%;
}
.col-m-3 {
width: 25%;
}
.col-m-4 {
width: 33.33%;
}
.col-m-5 {
width: 41.66%;
}
.col-m-6 {
width: 50%;
}
.col-m-7 {
width: 58.33%;
}
.col-m-8 {
width: 66.66%;
}
.col-m-9 {
width: 75%;
}
.col-m-10 {
width: 83.33%;
}
.col-m-11 {
width: 91.66%;
}
.col-m-12 {
width: 100%;
}
}
.DTile {
border: 2px solid blue;
background-color: #808080;
height: 200px;
}
.DGauge {
font-size: 350%;
color: #0000CD;
}
.DTitle {
color: #0000CD;
font-size: 150%;
}
.DsetTemp {
width: 80%;
}
.NTile {
border: 2px solid #7CFC00;
background-color: #808080;
height: 200px;
}
.NGauge {
font-size: 350%
}
.Ntitle {
color: #0000CD;
font-size: 150%;
}
.FTile {
border: 2px solid yellow;
background-color: #808080;
height: 200px;
}
.FGauge {
font-size: 350%;
}
.DRandom {
display: flex;
flex-direction: column;
width: 80%;
margin: auto;
}
.DRandom-1 {
flex: 1;
margin: auto;
border: 1px solid red;
}
.DRandom-2 {
flex: 1;
display: flex;
justify-content: space-between;
border: 1px solid red;
margin: auto;
/* width:100% */
}
.DRandom-2 button {
/* flex:1; */
/* width:20%; */
}
.DRandom-2 input {
flex: 1;
}
.FTitle {
color: #0000CD;
font-size: 150%;
}
.HTile {
border: 2px solid #7CFC00;
background-color: #808080;
height: 200px;
}
.HGauge {
font-size: 350%
}
.HTitle {
color: #0000CD;
font-size: 150%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="testStyles.css">
</head>
<body>
<div class="row">
<div class="col-3">
<div class="DTile">
<p class="DTitle"> The Den</p>
<div class="DGauge" id="Dtemp"></div>
<div class="DRandom">
<div class="DRandom-1">
<img src="" id="Dicon" width="80px" height="30px" vspace="10">
</div>
<div class="DRandom-2">
<button id="btn">
Button
</button>
<input id="Create" class="DsetTemp" type="text" id="DsetTemp" value="" />
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="FTile">
<p class="FTitle"> Front room</p>
<div class="FGauge" id="Ftemp"></div>
<img src="" id="Ficon" width="80px" height="30px" vspace="10">
</div>
</div>
<div class="col-3">
<div class="HTile">
<p class="HTitle"> Hallway</p>
<div class="HGauge" id="Htemp"></div>
<img src="" id="Hicon" width="80px" height="30px" vspace="10">
</div>
</div>
<div class="col-3">
<div class="NTile">
<p class="NTitle"> Niamh Room</p>
<div class="NGauge" id="Ntemp"></div>
<img src="" id="Nicon" width="80px" height="30px" vspace="10">
</div>
</div>
</div>
</body>
</html>

Where did I go wrong with this fluid grid layout?

It's my first time here. A friend suggested this as a good source of knowledge, and I am in dire need of that!
I am trying to write HTML and CSS using a viewport, media queries and a fluid grid to create a page which scales from desktop (desktop example ) to mobile (mobile example).
I have tried to cobble it together with help from the w3c site, but someone who wasn't particularly helpful said I had bootstrap in there (I didn't intend to use that, and want it taken out but I have no idea what it is).
What I've managed to achieve is to have the mobile size work, but for some reason the colour area of the boxes that should be 50% and 25% of the width of the rows in desktop don't stretch as they should.
What did I do wrong? Help would be most, most appreciated!
This is the html I had written:
And this is the CSS: #charset "utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 8px;
border: thin rgba(0, 0, 0, 1.00);
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
html {
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
}
.navspot {
width: 100%;
max-width: 100%;
padding: 10px;
height: auto;
vertical-align: middle;
background: #d9cf91;
text-align: right;
}
.maincontent {
/*properties for cell*/
/*Nothing is required here
because we can use default styles*/
background: #30332c;
color: #FFFFFF;
padding: 10px;
}
.box1 {
background-color: #dfcf91;
color: #FFFFFF;
padding: 10px;
text-align: left;
float: left;
}
.box2 {
background-color: rgba(107, 35, 36, 1.00);
color: #FFFFFF;
text-align: center;
padding: 10px;
float: left;
}
.box3 {
background-color: #8D9981;
text-align: center;
padding: 10px;
float: left;
}
.box4 {
background-color: #606956;
text-align: center;
padding: 10px;
float: left;
}
.box5 {
background-color: #8D9981;
text-align: center;
padding: 10px;
float: left;
}
.box6 {
background-color: #606956;
text-align: center;
padding: 10px;
float: left;
}
.footer {
/*properties for cell*/
/*Nothing is required here because we can use default styles*/
/*background: #d9cf91;*/
padding: 10px;
}
/*for phone*/
#media only screen and (max-width: 768px) {
[class*="col-"] {
width: 100%;
}
}
<div class="row">
<div class="col">
<div class="navspot">Navigation Spot
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="maincontent">Main Content Spot
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="box1">Box 1
</div>
</div>
<div class="col-6">
<div class="box2">Box 2
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="box3">Box 3
</div>
</div>
<div class="col-3">
<div class="box4">Box 4
</div>
</div>
<div class="col-3">
<div class="box5">Box 5
</div>
</div>
<div class="col-3">
<div class="box6">Box 6
</div>
</div>
<div class="row">
<div class="col">
<div class="footer">Footer Area
</div>
</div>
</div>
Sorry if I'm being a dunce. Really struggling with the concepts of CSS and fluidity. Thanks in advance!

Fix 1: Colored content boxes not stretching
Do as ovokuro said, and remove float:left; line from ALL of your ".box" classes.
Fix 2: Column behavior and wrapping in your grid
Some div elements in your grid are not inheriting the border-box model, as you expected. To fix this for all browsers add:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
For more about this see Box Sizing > Universal Box Sizing with Inheritance
Fix 3: Guides
While you are learning add some guides to your grid so you can more easily see what you are doing, and how things relate. For example:
/* temporary orange column guides */
[class*="col-"] {
border: 1px dotted orange;
}

Custom Responsive grid column sizes not sizing properly

Ok. Long time reader first time poster. So I have been trying to create a custom grid system so I don't have to rely on frameworks such as bootstrap or boilerplate all the time. I have got the grid working but, When a col-12x is above another col-12x. The first columns still has 15px of padding on the right, and some columns don't have the padding on the right of the last column in a row. The text wont break the same as it is for identical columns. I have attached a link to a [JSFIDDLE][1] since S.O wont let me put in the css for some reason.
<div class="grid-fw">
<div class="row">
<div class="col-1xs"><p>col-1</p></div>
<div class="col-1xs"><p>col-1</p></div>
<div class="col-1xs"><p>col-1</p></div>
<div class="col-1xs"><p>col-1</p></div>
<div class="col-1xs"><p>col-1</p></div>
<div class="col-1xs"><p>col-1</p></div>
<div class="col-1xs"><p>col-1</p></div>
<div class="col-1xs"><p>col-1</p></div>
<div class="col-1xs"><p>col-1</p></div>
<div class="col-1xs"><p>col-1</p></div>
<div class="col-1xs"><p>col-1</p></div>
<div class="col-1xs"><p>col-1</p></div>
</div>
<div class="row">
<div class="col-6xs"><p>col-6</p></div>
<div class="col-4xs"><p>col-4</p></div>
<div class="col-2xs"><p>col-2</p></div>
</div>
<div class="row">
<div class="col-6xs col-8lg">
<div class="col-8xs"><p>col-8</p></div>
<div class="col-4xs"><p>col-4</p></div>
</div>
<div class="col-6xs col-4lg"><p>col-8</p></div>
</div>
<div class="row">
<div class="col-4xs"><p>col-4</p></div>
<div class="col-4xs"><p>col-4</p></div>
<div class="col-4xs"><p>col-4</p></div>
</div>
<div class="row">
<div class="col-12xs"><p>col-12</p></div>
<div class="col-12xs"><p>col-12</p></div>
</div>
</div>
I have a feeling that its the same issue for both things, but its driving me crazy. Any help would be greatly appreciated.

because col-12* it is your max # of columns (like bootstrap), so you can only have one for each .row (given your current CSS) where you state:
/* Floats last ".col-" to the right */
[class*='col-']:last-of-type { padding-right: 0; }
having two col-12* in one .row will make the 1st col-12* to have your default padding-right:10px as you state here
/* Column attribute selector */
[class*='col-'] { position: relative; float: left; padding-right: 10px; min-height: 1px; }
Snippet
/* Grid Container */
.grid,
.grid-fw {
padding: 15px;
margin: 0 auto;
}
/* Phones */
#media (min-width: 420px) {
.grid {
width: 400px;
}
}
/* Mobile */
#media (min-width: 768px) {
.grid {
width: 750px;
}
}
/* Tablet */
#media (min-width: 992px) {
.grid {
width: 970px;
}
}
/* Desktop */
#media (min-width: 1200px) {
.grid {
width: 1170px;
}
}
/* Clearfix */
.row:after,
.row:before {
content: "";
display: table;
clear: both !important;
}
/* Column attribute selector */
[class*='col-'] {
position: relative;
float: left;
padding-right: 10px;
min-height: 1px;
}
/* Floats last ".col-" to the right */
[class*='col-']:last-of-type {
padding-right: 0;
}
/* Phones Grid Columns */
#media only screen and (max-width: 420px) {
[class*='col-'] {
width: 100%;
padding-right: 0;
}
}
/* Grid Columns Mobile First */
#media (min-width: 321px) {
.col-1xs {
width: 8.33333333%;
}
.col-2xs {
width: 16.66666667%;
}
.col-3xs {
width: 25%;
}
.col-4xs {
width: 33.33333333%;
}
.col-5xs {
width: 41.66666667%;
}
.col-6xs {
width: 50%;
}
.col-7xs {
width: 58.33333333%;
}
.col-8xs {
width: 66.66666667%;
}
.col-9xs {
width: 75%;
}
.col-10xs {
width: 83.33333333%;
}
.col-11xs {
width: 91.66666667%;
}
.col-12xs {
width: 100%;
}
}
/* Tablet Grid Columns Mobile First */
#media (min-width: 768px) {
.col-1sm {
width: 8.33333333%;
}
.col-2sm {
width: 16.66666667%;
}
.col-3sm {
width: 25%;
}
.col-4sm {
width: 33.33333333%;
}
.col-5sm {
width: 41.66666667%;
}
.col-6sm {
width: 50%;
}
.col-7sm {
width: 58.33333333%;
}
.col-8sm {
width: 66.66666667%;
}
.col-9sm {
width: 75%;
}
.col-10sm {
width: 83.33333333%;
}
.col-11sm {
width: 91.66666667%;
}
.col-12sm {
width: 100%;
}
}
/* Laptop Grid Columns */
#media (min-width: 992px) {
.col-1md {
width: 8.33333333%;
}
.col-2md {
width: 16.66666667%;
}
.col-3md {
width: 25%;
}
.col-4md {
width: 33.33333333%;
}
.col-5md {
width: 41.66666667%;
}
.col-6md {
width: 50%;
}
.col-7md {
width: 58.33333333%;
}
.col-8md {
width: 66.66666667%;
}
.col-9md {
width: 75%;
}
.col-10md {
width: 83.33333333%;
}
.col-11md {
width: 91.66666667%;
}
.col-12md {
width: 100%;
}
}
/* Desktop Grid Columns */
#media (min-width: 1200px) {
.col-1lg {
width: 8.33333333%;
}
.col-2lg {
width: 16.66666667%;
}
.col-3lg {
width: 25%;
}
.col-4lg {
width: 33.33333333%;
}
.col-5lg {
width: 41.66666667%;
}
.col-6lg {
width: 50%;
}
.col-7lg {
width: 58.33333333%;
}
.col-8lg {
width: 66.66666667%;
}
.col-9lg {
width: 75%;
}
.col-10lg {
width: 83.33333333%;
}
.col-11lg {
width: 91.66666667%;
}
.col-12lg {
width: 100%;
}
}
/* Removes padding behaviour on widths */
*,
*:after,
*:before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Clearfix for Nested Rows */
.clearfix {
clear: both;
}
/* Show Columns */
[class*='col-'] > p {
background-color: #004d81;
padding: 10px;
border-radius: 4px;
margin-bottom: 10px;
font-size: 0.8rem;
text-align: center;
color: #fff;
}
<div class="grid-fw">
<div class="row">
<div class="col-1xs">
<p>col-1</p>
</div>
<div class="col-1xs">
<p>col-1</p>
</div>
<div class="col-1xs">
<p>col-1</p>
</div>
<div class="col-1xs">
<p>col-1</p>
</div>
<div class="col-1xs">
<p>col-1</p>
</div>
<div class="col-1xs">
<p>col-1</p>
</div>
<div class="col-1xs">
<p>col-1</p>
</div>
<div class="col-1xs">
<p>col-1</p>
</div>
<div class="col-1xs">
<p>col-1</p>
</div>
<div class="col-1xs">
<p>col-1</p>
</div>
<div class="col-1xs">
<p>col-1</p>
</div>
<div class="col-1xs">
<p>col-1</p>
</div>
</div>
<div class="row">
<div class="col-6xs">
<p>col-6</p>
</div>
<div class="col-4xs">
<p>col-4</p>
</div>
<div class="col-2xs">
<p>col-2</p>
</div>
</div>
<div class="row">
<div class="col-6xs col-8lg">
<div class="col-8xs">
<p>col-8</p>
</div>
<div class="col-4xs">
<p>col-4</p>
</div>
</div>
<div class="col-6xs col-4lg">
<p>col-8</p>
</div>
</div>
<div class="row">
<div class="col-4xs">
<p>col-4</p>
</div>
<div class="col-4xs">
<p>col-4</p>
</div>
<div class="col-4xs">
<p>col-4</p>
</div>
</div>
<div class="row">
<div class="col-12xs">
<p>col-12</p>
</div>
</div>
<div class="row">
<div class="col-12xs">
<p>col-12</p>
</div>
</div>
</div>

Using target on div without a href

I have created a row div with id"dashboard" in which i have 3 divs. And below this row i have created 3 rows with one div in each row. I want to click on one div in row div with id"dashboard" and open the row div with id "alarm". I want to use target to acheive this task but unfortunately target can only be used with a href tag. Here is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>My Dashboard</title>
</head>
<body>
<div id="dashboard" class="row" >
<div class="col-4" style="background-color:#009">
</div>
<div class="col-4" style="background-color:#C00">
</div>
<div class="col-4" style="background-color:#0C0">
</div>
</div>
<div id="alarm" class="row" >
<div class="col-12" style="background-color:#009">
</div>
</div>
<div id="calendar" class="row" >
<div class="col-12" style="background-color:C00">
</div>
</div>
<div id="weather" class="row" >
<div class="col-12" style="background-color:#0C0">
</div>
</div>
</body>
</html>
And here is its css code:
#charset "utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.show{
display: none;
}
.show:target{
display: block;
}

As in this JS Fiddle, this is a CSS only solution, just replace your div's with a's and making use of the :target it will work the way you want:
#charset"utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
.show {
display: none;
}
:target {
display: block;
}
<div id="dashboard" class="row">
</div>
<div id="alarm" class="row show">
<div class="col-12" style="background-color:#009"></div>
</div>
<div id="calendar" class="row show">
<div class="col-12" style="background-color:#C00"></div>
</div>
<div id="weather" class="row show">
<div class="col-12" style="background-color:#0C0"></div>
</div>
Update: Upon a request in the comment, now with adding an <a href="#dashboard"> in each one of the .show gadgets and performing the same :target trick we have this result JS Fiddle 2:
#charset"utf-8";
/* CSS Document */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
.show {
display: none;
position: absolute;
width: 100%;
height: 400px;
top: 0;
}
:target {
display: block;
}
.back-btn {
width: 60px;
height: 40px;
display: inline-block;
z-index: 20;
background-color: orange;
position: absolute;
padding-top: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: black;
}
<div id="dashboard" class="row">
</div>
<div id="alarm" class="alarm row show">
back
<div class="col-12" style="background-color:#009; height:300px;"></div>
</div>
<div id="calendar" class="row show">
back
<div class="col-12" style="background-color:#C00; height:300px;"></div>
</div>
<div id="weather" class="row show">
back
<div class="col-12" style="background-color:#0C0; height:300px;"></div>
</div>
** NOTE that I've added height:300px; to the inline style of the .show DIVs.

Target isn't the correct way to do it anyway. Put an "onclick=" on the div, and write a Javascript function to handle the behavior.
<div id="dashboard" class="row">
<div class="col-4" style="background-color:#009" onclick="myfunction('col4')">
</div>
</div>
function myfunction(whichColumn){
//do some stuff with whichColumn
}

Why wouldn't display: flex; work?

I am learning HTML/CSS at Udacity. I am trying to get the first row items col-2 and col-10 to fall in the same row next to each other but the display: flex; wouldn't work. Any pointers please?
*{
border: red solid 1px; !important
}
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
*{
text-align: center;
}
}
.row {
width : 100%;
display: flex;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
<!DOCTYPE HTML>
<head>
<title>FRONT-END NINJA</title>
<link rel="stylesheet" type="text/css" href="FroEndNja.css">
</head>
<body>
<div class="row">
<div class="col-2">Udacity Logo</div>
<div class="col-10">JANE DOETTE<br>FRONT-END NINJA</div>
</div>
<div class="row">
<div class="col-12">IMAGE</div>
</div>
<div class="row">
<div class="col-12">FEATURED WORK</div>
</div>
<div class="row">
<div class="col-4">IMAGE1</div>
<div class="col-4">IMAGE2</div>
<div class="col-4">IMAGE3</div>
</div>
<div class="row">
<div class="col-4">TEXT1</div>
<div class="col-4">TEXT2</div>
<div class="col-4">TEXT3</div>
</div>
</body>
Thank you,
Abhilash

You have an extra closing brace in your CSS which was throwing an error
*{
text-align: center;
}
} /* here */
.row {
width : 100%;
display: flex;
}
* {
border: red solid 1px;
box-sizing: border-box;
text-align: center;
margin: 0;
padding: 0;
}
.row {
display: flex;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
<!DOCTYPE HTML>
<head>
<title>FRONT-END NINJA</title>
<link rel="stylesheet" type="text/css" href="FroEndNja.css">
</head>
<body>
<div class="row">
<div class="col-2">Udacity Logo</div>
<div class="col-10">JANE DOETTE
<br>FRONT-END NINJA</div>
</div>
<div class="row">
<div class="col-12">IMAGE</div>
</div>
<div class="row">
<div class="col-12">FEATURED WORK</div>
</div>
<div class="row">
<div class="col-4">IMAGE1</div>
<div class="col-4">IMAGE2</div>
<div class="col-4">IMAGE3</div>
</div>
<div class="row">
<div class="col-4">TEXT1</div>
<div class="col-4">TEXT2</div>
<div class="col-4">TEXT3</div>
</div>
</body>

Try the flex-direction property, it should work if you set it to row ? Also, use autoprefixer if you use flexbox so that your stuff works across browsers.