grid

by momenelkamri

HTML

<div id="content">

		<div class="one">1</div>
		<div class="two">2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div class="four">7</div>
		<div>8</div>
		<div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
	</div>

SCSS

body{
			color: #fff;
			font-family: 'Nunito Semibold';
			text-align: center;
		}
		#content{
			display: grid;
			grid-template-columns: repeat(12, 1fr);

      grid-gap: 10px;
			max-width: 960px;
			margin: 0 auto;
		}
		#content div{
			background: #3bbced;
			padding: 30px;
		}
		#content div:nth-child(even){
			background: #777;
		}
    
    .one {
      grid-column: span 6; // 1/3;
      grid-row:  span 3;
    }
    
    .four {
      grid-column:  span 2;
      grid-row:  span 2;
    }