Web.QHMIT
.com
Toggle navigation
☰
Home
HTML
CSS
Scripting
Database
Run
<!doctype html> <title>Example</title> <style> .wrapper { display: flex; } .column { display: flex; flex-direction: column; } .column > div { font-size: 4vh; color: white; background: royalblue; margin: .1em; padding: .3em 1em; border-radius: 3px; flex: 1; } </style> <div class="wrapper"> <div class="column"> <div>1</div> </div> <div class="column"> <div>1</div> <div>2</div> </div> <div class="column"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="column"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div class="column"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="column"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> <div class="column"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> </div> <div class="column"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> <div class="column"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> <div class="column"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> <div class="column"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> </div> <div class="column"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> </div> </div>
Preview