Skip to content

Instantly share code, notes, and snippets.

@davidbullock

davidbullock/Pure-CSS-auto-sizing-grid-using-nth-child-selectors.markdown

Created February 4, 2015 00:51
Show Gist options
  • Save davidbullock/2f658cd22cc47855e798 to your computer and use it in GitHub Desktop.
Save davidbullock/2f658cd22cc47855e798 to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS auto sizing grid using nth child selectors
Raw
index.haml
.container
%h2 Grid 1 list items (auto)
.grid-container.featured.category
%ul.grid-container-list.grid-lines.fill-3
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%h2 Grid 2 list items (auto)
.grid-container.featured.category
%ul.grid-container-list.grid-lines.fill-3
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%h2 Grid 3 list items (default)
.grid-container.featured.category
%ul.grid-container-list.grid-lines.fill-3
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%h2 Grid 4 list items (auto)
.grid-container.featured.category
%ul.grid-container-list.grid-lines.fill-4
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%h2 Grid 5 list items (auto)
.grid-container.featured.category
%ul.grid-container-list.grid-lines.fill-3
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%h2 Grid 6 list items (default)
.grid-container.featured.category
%ul.grid-container-list.grid-lines.fill-3
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
.grid-container.featured.category
%h2 Grid 7 list items (auto)
%ul.grid-container-list.grid-lines.fill-3
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
.grid-container.featured.category
%h2 Grid 8 list items (auto)
%ul.grid-container-list.grid-lines.fill-3
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
.grid-container.featured.category
%h2 Grid 9 list items (default)
%ul.grid-container-list.grid-lines.fill-3
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
%li.grid-lines-item
.grid-thumbnail
<img src="http://placehold.it/140x140">
Raw
Pure-CSS-auto-sizing-grid-using-nth-child-selectors.markdown

Pure CSS auto sizing grid using nth child selectors

Auto-sizing grid using nth child selectors. Default grid widths are overridden by odd list item values. No JS required, IE9 and above.

A Pen by David Bullock on CodePen.

License.

Raw
style.scss
@import "bourbon";
* {
box-sizing: border-box;
&:before,
&:after {
box-sizing: border-box;
}
}
body {
font-size: 14px;
font-family: $helvetica;
}
h2 {
font-weight: bold;
font-size: 25px;
margin-bottom: 20px;
}
.container {
width: 100%;
max-width: 940px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
margin-bottom: 10px;
}
// Grid layout
.grid-container li {
position: relative;
float: left;
}
.grid-container-list {
margin-left: 0;
margin-bottom: 0;
list-style: none;
}
.featured:before,
.featured:after {
display: table;
content: " ";
line-height: 0;
}
.featured:after {
clear: both;
}
.featured {
&.category {
margin-bottom: 20px;
.grid-container-list {
// selects first list item if there is 1 list item only
> li:first-child:nth-last-child(1) {
width: 100% !important;
}
// selects first list item if there are 2 list items only
> li:first-child:nth-last-child(2) {
width: (100% / 2) !important;
}
// selects second but first list item if there are 2 list items only
> li:first-child:nth-last-child(2) ~ li {
width: (100% / 2) !important;
}
// > li:nth-child(2):nth-last-child(2) { // alt method
// width: (100% / 2) !important;
// }
// selects first list item if there are 4 list items only
> li:first-child:nth-last-child(4) {
width: (100% / 2) !important;
}
// selects all but first list item if there are 4 list items only
> li:first-child:nth-last-child(4) ~ li {
width: (100% / 2) !important;
}
// selects first list item if there are 5 list items only
> li:first-child:nth-last-child(5) {
width: (100% / 2) !important;
}
// selects second list item if there are 5 list items only
> li:first-child:nth-last-child(5) + li {
width: (100% / 2) !important;
}
// > li:nth-child(2):nth-last-child(4) { // alt method
// width: 50% !important;
// }
// selects first list item if there are 7 list items only
> li:first-child:nth-last-child(7) {
width: (100% / 2) !important;
}
// selects first 4 list items if there are 7 list items only
> li:first-child:nth-last-child(7) + li {
width: (100% / 2) !important;
}
> li:first-child:nth-last-child(7) + li + li {
width: (100% / 2) !important;
}
> li:first-child:nth-last-child(7) + li + li + li {
width: (100% / 2) !important;
}
// selects first list item if there are 8 list items only
> li:first-child:nth-last-child(8) {
width: (100% / 4) !important;
}
// selects all but first list item if there are 8 list items only
> li:first-child:nth-last-child(8) ~ li {
width: (100% / 4) !important;
}
// Selects last 4 list items if there are 7 list items only
// > li:first-child:nth-last-child(7) + li + li ~ li {
// width: (100% / 4) !important;
// }
// manually selects each of the last 4 items
// > li:first-child:nth-last-child(7) + li + li ~ li {
// width: (100% / 4) !important;
// }
// > li:first-child:nth-last-child(7) + li + li + li ~ li {
// width: (100% / 4) !important;
// }
// > li:first-child:nth-last-child(7) + li + li + li + li ~ li {
// width: (100% / 4) !important;
// }
// > li:first-child:nth-last-child(7) + li + li + li + li + li ~ li {
// width: (100% / 4) !important;
// }
}
}
.grid-container-list {
&.fill-1 {
> li {
width: 100%;
}
}
&.fill-2 {
> li.featured-item {
width: 100%;
}
> li {
width: (100% / 2);
}
}
&.fill-3 {
> li.featured-item {
width: ((100% / 3) * 2);
}
> li {
width: (100% / 3);
}
}
&.fill-4 {
> li.featured-item {
width: (100% / 2);
}
> li {
width: (100% / 4);
}
}
&.fill-8 {
> li.featured-item {
width: (100% / 4);
}
> li {
width: (100% / 8);
}
}
}
}
// Grid Styles
$grid-border-color: gray;
$grid-item-background-color: #ffffff;
$grid-list-background-color: $grid-border-color;
$grid-items-background: $grid-list-background-color;
$grid-item-background: $grid-item-background-color;
$grid-item-border: 1px solid $grid-border-color;
.grid-lines {
position: relative;
float: left;
width: 100%;
// border method
border-top: $grid-item-border;
border-left: $grid-item-border;
box-shadow: gray;
background: #ffffff;
&::before {
content: " ";
background: gray;
bottom: 0px;
height: 1px;
position: absolute;
width: 100%;
}
&::after {
content: " ";
background: gray;
height: 100%;
position: absolute;
right: 0px;
width: 1px;
}
&.no-outer-lines {
border-top: none;
border-left: none;
box-shadow: none;
background: #ffffff;
&::before {
content: " ";
background: #ffffff;
bottom: 0px;
height: 1px;
position: absolute;
width: 100%;
z-index: 1;
}
&::after {
content: " ";
background: #ffffff;
height: 100%;
position: absolute;
right: 0px;
width: 2px;
}
}
}
.grid-lines-item {
background: $grid-item-background;
border-bottom: $grid-item-border;
border-right: $grid-item-border;
padding: 10px;
&:hover {
background-color: gray;
.grid-thumbnail {
border-color: gray;
box-shadow: -1px 1px 0 gray;
}
}
.grid-thumbnail {
border: 1px solid #ffffff;
&:hover {
box-shadow: -2px 2px 0 gray;
}
&:active {
box-shadow: inset -2px 2px 0 gray;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment