Grid 2 Go

What is a grid 2 go How do you make a grid 2 go? This script and codes were developed by Englishextra on 23 March 2022, Wednesday.

How do I make an grid 2 go?
  1. Grid 2 Go Previews
  2. Grid 2 Go HTML Codes
  3. Grid 2 Go CSS Codes
Grid 2 Go Previews

Grid 2 Go HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Grid 2 Go</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      @import url("https://fonts.googleapis.com/css?family=Open+Sans:700");
*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  padding: 50px;
  font: 700 14px/1 'Open Sans', sans-serif;
  text-align: center;
  color: #fff;
  background: #456;
}

.title {
  font-size: 24px;
  margin: 0 0 50px;
}

.grid {
  margin-bottom: 20px;
  padding-left: 20px;
  background: #fff;
}
.grid:before, .grid:after {
  content: " ";
  display: table;
}
.grid:after {
  clear: both;
}

[class*='col-'] {
  float: left;
  padding-right: 20px;
}

.col-1-1 {
  width: 100%;
}

.col-1-2 {
  width: 50%;
}

.col-1-3 {
  width: 33.33%;
}

.col-2-3 {
  width: 66.66%;
}

.col-1-4 {
  width: 25%;
}

.col-3-4 {
  width: 75%;
}

.col-1-5 {
  width: 20%;
}

.module {
  padding: 20px;
  background: #789;
}

    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <div class='title'>
  Grid 2 Go
</div>
<div class='grid'>
  <div class='col-1-1'>
    <div class='module'>
      1/1
    </div>
  </div>
</div>
<div class='grid'>
  <div class='col-1-2'>
    <div class='module'>
      1/2
    </div>
  </div>
  <div class='col-1-2'>
    <div class='module'>
      1/2
    </div>
  </div>
</div>
<div class='grid'>
  <div class='col-1-3'>
    <div class='module'>
      1/3
    </div>
  </div>
  <div class='col-2-3'>
    <div class='module'>
      2/3
    </div>
  </div>
</div>
<div class='grid'>
  <div class='col-1-4'>
    <div class='module'>
      1/4
    </div>
  </div>
  <div class='col-3-4'>
    <div class='module'>
      3/4
    </div>
  </div>
</div>
<div class='grid'>
  <div class='col-1-5'>
    <div class='module'>
      1/5
    </div>
  </div>
  <div class='col-1-5'>
    <div class='module'>
      1/5
    </div>
  </div>
  <div class='col-1-5'>
    <div class='module'>
      1/5
    </div>
  </div>
  <div class='col-1-5'>
    <div class='module'>
      1/5
    </div>
  </div>
  <div class='col-1-5'>
    <div class='module'>
      1/5
    </div>
  </div>
</div>
  
  
</body>
</html>

Grid 2 Go CSS Codes

@import url("https://fonts.googleapis.com/css?family=Open+Sans:700");
*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  padding: 50px;
  font: 700 14px/1 'Open Sans', sans-serif;
  text-align: center;
  color: #fff;
  background: #456;
}

.title {
  font-size: 24px;
  margin: 0 0 50px;
}

.grid {
  margin-bottom: 20px;
  padding-left: 20px;
  background: #fff;
}
.grid:before, .grid:after {
  content: " ";
  display: table;
}
.grid:after {
  clear: both;
}

[class*='col-'] {
  float: left;
  padding-right: 20px;
}

.col-1-1 {
  width: 100%;
}

.col-1-2 {
  width: 50%;
}

.col-1-3 {
  width: 33.33%;
}

.col-2-3 {
  width: 66.66%;
}

.col-1-4 {
  width: 25%;
}

.col-3-4 {
  width: 75%;
}

.col-1-5 {
  width: 20%;
}

.module {
  padding: 20px;
  background: #789;
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.