1 files changed, 75 insertions, 0 deletions
diff --git a/plugins/jetpack/scss/_utilities/_grid.scss b/plugins/jetpack/scss/_utilities/_grid.scss
new file mode 100644
index 00000000..788a377a
--- /dev/null
+++ b/plugins/jetpack/scss/_utilities/_grid.scss
@@ -0,0 +1,75 @@
+// ==========================================================================
+// Grid styles
+// 12 column grid
+// ==========================================================================
+
+.j-row {
+	width: 100%;
+	margin: 0 auto;
+	&:before,
+	&:after {
+		content: " ";
+		display: table;
+	}
+
+	&:after {
+		clear: both;
+	}
+}
+
+.j-col {
+	padding: 0.85em;
+	width: 100%;
+	float: left;
+	position: relative;
+}
+
+// Small grid (Mobile first)
+@media only screen {
+	// .j-sm-1		{width: 8.33333%;}
+	// .j-sm-2		{width: 16.66667%;}
+	// .j-sm-3		{width: 25%;}
+	// .j-sm-4		{width: 33.33333%;}
+	.j-sm-5		{width: 41.66667%;}
+	// .j-sm-6		{width: 50%;}
+	.j-sm-7		{width: 58.33333%;}
+	// .j-sm-8		{width: 66.66667%;}
+	// .j-sm-9		{width: 75%;}
+	// .j-sm-10	{width: 83.33333%;}
+	// .j-sm-11	{width: 91.66667%;}
+	.j-sm-12	{width: 100%;}
+}
+
+// Medium grid
+// 530px and up
+@include minbreakpoint(large-phone) {
+	// .j-md-1		{width: 8.33333%;}
+	// .j-md-2		{width: 16.66667%;}
+	// .j-md-3		{width: 25%;}
+	.j-md-4		{width: 33.33333%;}
+	// .j-md-5		{width: 41.66667%;}
+	.j-md-6		{width: 50%;}
+	// .j-md-7		{width: 58.33333%;}
+	.j-md-8		{width: 66.66667%;}
+	// .j-md-9		{width: 75%;}
+	// .j-md-10	{width: 83.33333%;}
+	// .j-md-11	{width: 91.66667%;}
+	.j-md-12	{width: 100%;}
+}
+
+// Large grid
+// 782px and up
+@include minbreakpoint(tablet) {
+	// .j-lrg-1	{width: 8.33333%;}
+	// .j-lrg-2	{width: 16.66667%;}
+	// .j-lrg-3	{width: 25%;}
+	.j-lrg-4	{width: 33.33333%;}
+	.j-lrg-5	{width: 41.66667%;}
+	.j-lrg-6	{width: 50%;}
+	.j-lrg-7	{width: 58.33333%;}
+	.j-lrg-8	{width: 66.66667%;}
+	// .j-lrg-9	{width: 75%;}
+	// .j-lrg-10	{width: 83.33333%;}
+	// .j-lrg-11	{width: 91.66667%;}
+	.j-lrg-12	{width: 100%;}
+}