Skip to content

Instantly share code, notes, and snippets.

@ezzatron

ezzatron/sudoku.html

Created January 27, 2012 09:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ezzatron/1687985 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ezzatron/1687985 to your computer and use it in GitHub Desktop.
Download ZIP
Nice Sudoku layout
Raw
sudoku.html
<!DOCTYPE html>
<html>
<head>
<title>Sudoku layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
/* change font size to change scale */
.sudoku-grid {
font-size: 24px;
}
/* groups */
.sudoku-grid > div > div {
float: left;
border: 1px solid black;
}
/* rows */
.sudoku-grid > div
, .sudoku-grid > div > div > div {
clear: left;
}
/* cells */
.sudoku-grid > div > div > div > div {
float: left;
width: 1.3em;
height: 1.3em;
border-right: 1px solid lightgrey;
border-bottom: 1px solid lightgrey;
text-align: center;
line-height: 1.3em;
}
/* outer border tweaks */
.sudoku-grid > div > div:first-child {
border-left: 2px solid black;
}
.sudoku-grid > div > div:last-child {
border-right: 2px solid black;
}
.sudoku-grid > div:first-child > div {
border-top: 2px solid black;
}
.sudoku-grid > div:last-child > div {
border-bottom: 2px solid black;
}
/* inner border tweaks */
.sudoku-grid > div > div > div div:last-child {
border-right: none;
}
.sudoku-grid > div > div > div:last-child div {
border-bottom: none;
}
</style>
</head>
<body>
<div class="sudoku-grid">
<div>
<div>
<div>
<div></div>
<div>2</div>
</div>
<div>
<div></div>
<div></div>
</div>
</div>
<div>
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div>2</div>
</div>
</div>
</div>
<div>
<div>
<div>
<div>4</div>
<div></div>
</div>
<div>
<div></div>
<div></div>
</div>
</div>
<div>
<div>
<div></div>
<div></div>
</div>
<div>
<div>3</div>
<div></div>
</div>
</div>
</div>
</div>
<div style="clear: left; height: 30px;"></div>
<div class="sudoku-grid">
<div>
<div>
<div>
<div>5</div>
<div>3</div>
<div></div>
</div>
<div>
<div>6</div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div>9</div>
<div>8</div>
</div>
</div>
<div>
<div>
<div></div>
<div>7</div>
<div></div>
</div>
<div>
<div>1</div>
<div>9</div>
<div>5</div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div>6</div>
<div></div>
</div>
</div>
</div>
<div>
<div>
<div>
<div>8</div>
<div></div>
<div></div>
</div>
<div>
<div>4</div>
<div></div>
<div></div>
</div>
<div>
<div>7</div>
<div></div>
<div></div>
</div>
</div>
<div>
<div>
<div></div>
<div>6</div>
<div></div>
</div>
<div>
<div>8</div>
<div></div>
<div>3</div>
</div>
<div>
<div></div>
<div>2</div>
<div></div>
</div>
</div>
<div>
<div>
<div></div>
<div></div>
<div>3</div>
</div>
<div>
<div></div>
<div></div>
<div>1</div>
</div>
<div>
<div></div>
<div></div>
<div>6</div>
</div>
</div>
</div>
<div>
<div>
<div>
<div></div>
<div>6</div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div>4</div>
<div>1</div>
<div>9</div>
</div>
<div>
<div></div>
<div>8</div>
<div></div>
</div>
</div>
<div>
<div>
<div>2</div>
<div>8</div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div>5</div>
</div>
<div>
<div></div>
<div>7</div>
<div>9</div>
</div>
</div>
</div>
</div>
<div style="clear: left; height: 30px;"></div>
<div class="sudoku-grid">
<div>
<div>
<div>
<div></div>
<div>4</div>
<div>6</div>
<div>8</div>
</div>
<div>
<div>1</div>
<div></div>
<div></div>
<div>13</div>
</div>
<div>
<div></div>
<div></div>
<div>7</div>
<div></div>
</div>
<div>
<div>11</div>
<div>3</div>
<div>2</div>
<div></div>
</div>
</div>
<div>
<div>
<div></div>
<div></div>
<div></div>
<div>16</div>
</div>
<div>
<div></div>
<div>2</div>
<div>10</div>
<div></div>
</div>
<div>
<div></div>
<div>11</div>
<div>3</div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div>13</div>
<div></div>
</div>
</div>
<div>
<div>
<div></div>
<div>1</div>
<div>14</div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div>7</div>
<div>3</div>
</div>
<div>
<div>2</div>
<div></div>
<div>9</div>
<div></div>
</div>
<div>
<div>5</div>
<div>6</div>
<div></div>
<div></div>
</div>
</div>
<div>
<div>
<div></div>
<div></div>
<div>2</div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div>6</div>
</div>
<div>
<div></div>
<div>14</div>
<div></div>
<div></div>
</div>
<div>
<div>4</div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div>
<div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div>4</div>
</div>
<div>
<div></div>
<div>2</div>
<div></div>
<div></div>
</div>
<div>
<div>10</div>
<div></div>
<div></div>
<div>15</div>
</div>
</div>
<div>
<div>
<div></div>
<div></div>
<div>15</div>
<div>8</div>
</div>
<div>
<div></div>
<div>3</div>
<div>2</div>
<div></div>
</div>
<div>
<div>11</div>
<div>10</div>
<div></div>
<div></div>
</div>
<div>
<div>7</div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div>
<div>
<div></div>
<div></div>
<div>11</div>
<div></div>
</div>
<div>
<div>13</div>
<div></div>
<div>8</div>
<div></div>
</div>
<div>
<div></div>
<div>15</div>
<div></div>
<div>7</div>
</div>
<div>
<div></div>
<div></div>
<div>5</div>
<div>16</div>
</div>
</div>
<div>
<div>
<div></div>
<div>2</div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div>9</div>
<div></div>
<div>15</div>
</div>
<div>
<div>14</div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div>1</div>
</div>
</div>
</div>
<div>
<div>
<div>
<div>14</div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div>16</div>
</div>
<div>
<div>7</div>
<div></div>
<div>11</div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div>10</div>
<div></div>
</div>
</div>
<div>
<div>
<div>16</div>
<div>5</div>
<div></div>
<div></div>
</div>
<div>
<div>14</div>
<div></div>
<div>7</div>
<div></div>
</div>
<div>
<div></div>
<div>8</div>
<div></div>
<div>13</div>
</div>
<div>
<div></div>
<div>12</div>
<div></div>
<div></div>
</div>
</div>
<div>
<div>
<div></div>
<div></div>
<div></div>
<div>8</div>
</div>
<div>
<div></div>
<div></div>
<div>4</div>
<div>12</div>
</div>
<div>
<div></div>
<div>16</div>
<div>2</div>
<div></div>
</div>
<div>
<div>1</div>
<div>3</div>
<div></div>
<div></div>
</div>
</div>
<div>
<div>
<div>1</div>
<div></div>
<div></div>
<div>3</div>
</div>
<div>
<div></div>
<div></div>
<div>8</div>
<div></div>
</div>
<div>
<div>12</div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div>
<div>
<div>
<div></div>
<div></div>
<div></div>
<div>11</div>
</div>
<div>
<div></div>
<div></div>
<div>15</div>
<div></div>
</div>
<div>
<div>5</div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div>13</div>
<div></div>
<div></div>
</div>
</div>
<div>
<div>
<div></div>
<div></div>
<div>16</div>
<div>15</div>
</div>
<div>
<div></div>
<div>14</div>
<div></div>
<div>10</div>
</div>
<div>
<div>13</div>
<div>6</div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div>7</div>
<div>5</div>
<div></div>
</div>
</div>
<div>
<div>
<div></div>
<div>12</div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div>5</div>
<div>6</div>
<div></div>
</div>
<div>
<div></div>
<div>14</div>
<div>16</div>
<div></div>
</div>
<div>
<div>10</div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div>
<div>
<div></div>
<div>10</div>
<div>7</div>
<div>13</div>
</div>
<div>
<div></div>
<div>11</div>
<div></div>
<div></div>
</div>
<div>
<div>2</div>
<div></div>
<div></div>
<div>12</div>
</div>
<div>
<div>9</div>
<div>6</div>
<div>14</div>
<div></div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment