Pure CSS auto sizing grid using nth child selectors

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">

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.

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;
		}
	}
}