Skip to content

Instantly share code, notes, and snippets.

@adam704a
Created January 26, 2024 18:17
Show Gist options
  • Save adam704a/723a5815c71994eb7846864bc1522d1b to your computer and use it in GitHub Desktop.
Save adam704a/723a5815c71994eb7846864bc1522d1b to your computer and use it in GitHub Desktop.
Tournament Bracket with Flexbox
<h1>Athletic Club of Columbus - Open Tournament</h1>
<main id="tournament">
<ul class="round round-1">
<li class="spacer">&nbsp;</li>
<li class="game game-top winner">Jim S <span>2</span></li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom ">Tom Smith<span>1</span></li>
<li class="spacer">&nbsp;</li>
<li class="game game-top winner">Bill M <span>2</span></li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom ">Tom F <span>1</span></li>
<li class="spacer">&nbsp;</li>
<li class="game game-top ">Frank D <span>1</span></li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom winner">Bob B <span>2</span></li>
<li class="spacer">&nbsp;</li>
<li class="game game-top winner">Kevin S <span>3</span></li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom ">Glen B <span>0</span></li>
<li class="spacer">&nbsp;</li>
<li class="game game-top winner">Tony L <span>2</span></li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom ">Victor T <span>1</span></li>
<li class="spacer">&nbsp;</li>
<li class="game game-top winner">Mark R <span>2</span></li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom ">Jeremy S <span>1</span></li>
<li class="spacer">&nbsp;</li>
<li class="game game-top winner">Dave C <span>3</span></li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom ">Jesse D <span>1</span></li>
<li class="spacer">&nbsp;</li>
<li class="game game-top winner">Adam P <span>2</span></li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom ">Mike V <span>1</span></li>
<li class="spacer">&nbsp;</li>
</ul>
<ul class="round round-2">
<li class="spacer">&nbsp;</li>
<li class="game game-top winner">Jim S <span>2</span></li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom ">Bill M <span>1</span></li>
<li class="spacer">&nbsp;</li>
<li class="game game-top winner">Bob B <span>3</span></li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom ">Kevin S <span>0</span></li>
<li class="spacer">&nbsp;</li>
<li class="game game-top ">Tony L <span>1</span></li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom winner">Mark R <span>2</span></li>
<li class="spacer">&nbsp;</li>
<li class="game game-top ">Dave C <span>50</span></li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom winner">Adam P <span>66</span></li>
<li class="spacer">&nbsp;</li>
</ul>
<ul class="round round-3">
<li class="spacer">&nbsp;</li>
<li class="game game-top winner">Jim S <span>3</span></li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom ">Bob B <span>0</span></li>
<li class="spacer">&nbsp;</li>
<li class="game game-top ">Mark R <span>2</span></li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom winner">Adam P <span>1</span></li>
<li class="spacer">&nbsp;</li>
</ul>
<ul class="round round-4">
<li class="spacer">&nbsp;</li>
<li class="game game-top winner">Jim S <span>3</span></li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom ">Adam P <span>0</span></li>
<li class="spacer">&nbsp;</li>
</ul>
</main>
/*
* Flex Layout Specifics
*/
main{
display:flex;
flex-direction:row;
}
.round{
display:flex;
flex-direction:column;
justify-content:center;
width:200px;
list-style:none;
padding:0;
}
.round .spacer{ flex-grow:1; }
.round .spacer:first-child,
.round .spacer:last-child{ flex-grow:.5; }
.round .game-spacer{
flex-grow:1;
}
/*
* General Styles
*/
body{
font-family:sans-serif;
font-size:small;
padding:10px;
line-height:1.4em;
}
li.game{
padding-left:20px;
}
li.game.winner{
font-weight:bold;
}
li.game span{
float:right;
margin-right:5px;
}
li.game-top{ border-bottom:1px solid #aaa; }
li.game-spacer{
border-right:1px solid #aaa;
min-height:40px;
}
li.game-bottom{
border-top:1px solid #aaa;
}

Tournament Bracket with Flexbox

Creating a tournament bracket, complete with the lines, with the Flexbox. That means no tables, no absolute positioning, no images or svg, just plain ole html and css.

A Pen by Adam Preston on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment