Build Responsive Tournament Brackets with Flexbox and SCSS

A CSS/SCSS solution for creating responsive tournament brackets using only HTML and CSS.

It utilizes CSS flexbox to build a flexible bracket layout that can adapt across any device. Developers can customize team names, styles, spacing and sizes through simple Sass variables.

How to use it:

1. Build the HTML for your first tournament bracket.

<div class="theme theme-dark">
  <div class="bracket disable-image">
    <div class="column one">
      <div class="match winner-top">
        <div class="match-top team">
          <span class="image"></span>
          <span class="seed">1</span>
          <span class="name">Orlando Jetsetters</span>
          <span class="score">2</span>
        </div>
        <div class="match-bottom team">
          <span class="image"></span>
          <span class="seed">8</span>
          <span class="name">D.C. Senators</span>
          <span class="score">1</span>
        </div>
        <div class="match-lines">
          <div class="line one"></div>
          <div class="line two"></div>
        </div>
        <div class="match-lines alt">
          <div class="line one"></div>
        </div>
      </div>
      <div class="match winner-bottom">
        <div class="match-top team">
          <span class="image"></span>
          <span class="seed">4</span>
          <span class="name">New Orleans Rockstars</span>
          <span class="score">1</span>
        </div>
        <div class="match-bottom team">
          <span class="image"></span>
          <span class="seed">5</span>
          <span class="name">West Virginia Runners</span>
          <span class="score">2</span>
        </div>
        <div class="match-lines">
          <div class="line one"></div>
          <div class="line two"></div>
        </div>
        <div class="match-lines alt">
          <div class="line one"></div>
        </div>
      </div>
      <div class="match winner-top">
        <div class="match-top team">
          <span class="image"></span>
          <span class="seed">2</span>
          <span class="name">Denver Demon Horses</span>
          <span class="score">2</span>
        </div>
        <div class="match-bottom team">
          <span class="image"></span>
          <span class="seed">7</span>
          <span class="name">Chicago Pistons</span>
          <span class="score">0</span>
        </div>
        <div class="match-lines">
          <div class="line one"></div>
          <div class="line two"></div>
        </div>
        <div class="match-lines alt">
          <div class="line one"></div>
        </div>
      </div>
      <div class="match winner-top">
        <div class="match-top team">
          <span class="image"></span>
          <span class="seed">3</span>
          <span class="name">San Francisco Porters</span>
          <span class="score">2</span>
        </div>
        <div class="match-bottom team">
          <span class="image"></span>
          <span class="seed">6</span>
          <span class="name">Seattle Climbers</span>
          <span class="score">1</span>
        </div>
        <div class="match-lines">
          <div class="line one"></div>
          <div class="line two"></div>
        </div>
        <div class="match-lines alt">
          <div class="line one"></div>
        </div>
      </div>
    </div>
    <div class="column two">
      <div class="match winner-bottom">
        <div class="match-top team">
          <span class="image"></span>
          <span class="seed">1</span>
          <span class="name">Orlando Jetsetters</span>
          <span class="score">1</span>
        </div>
        <div class="match-bottom team">
          <span class="image"></span>
          <span class="seed">5</span>
          <span class="name">West Virginia Runners</span>
          <span class="score">2</span>
        </div>
        <div class="match-lines">
          <div class="line one"></div>
          <div class="line two"></div>
        </div>
        <div class="match-lines alt">
          <div class="line one"></div>
        </div>
      </div>
      <div class="match winner-bottom">
        <div class="match-top team">
          <span class="image"></span>
          <span class="seed">2</span>
          <span class="name">Denver Demon Horses</span>
          <span class="score">1</span>
        </div>
        <div class="match-bottom team">
          <span class="image"></span>
          <span class="seed">3</span>
          <span class="name">San Francisco Porters</span>
          <span class="score">2</span>
        </div>
        <div class="match-lines">
          <div class="line one"></div>
          <div class="line two"></div>
        </div>
        <div class="match-lines alt">
          <div class="line one"></div>
        </div>
      </div>
    </div>
    <div class="column three">
      <div class="match winner-top">
        <div class="match-top team">
          <span class="image"></span>
          <span class="seed">5</span>
          <span class="name">West Virginia Runners</span>
          <span class="score">3</span>
        </div>
        <div class="match-bottom team">
          <span class="image"></span>
          <span class="seed">3</span>
          <span class="name">San Francisco Porters</span>
          <span class="score">2</span>
        </div>
        <div class="match-lines">
          <div class="line one"></div>
          <div class="line two"></div>
        </div>
        <div class="match-lines alt">
          <div class="line one"></div>
        </div>
      </div>        
    </div>
  </div>
</div>

2. Add compiled CSS rules to your page.

.theme {
  height: 100%;
  width: 100%;
  position: absolute;
}
.bracket {
  padding: 40px;
  margin: 5px;
}
.bracket {
  display: flex;
  flex-direction: row;
  position: relative;
}
.column {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  justify-content: space-around;
  align-content: center;
}
.match {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  max-width: 240px;
  height: 62px;
  margin: 12px 24px 12px 0;
}
.match .match-top {
  border-radius: 2px 2px 0 0;
}
.match .match-bottom {
  border-radius: 0 0 2px 2px;
}
.match .team {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid black;
  position: relative;
}
.match .team span {
  padding-left: 8px;
}
.match .team span:last-child {
  padding-right: 8px;
}
.match .team .score {
  margin-left: auto;
}
.match .team:first-child {
  margin-bottom: -1px;
}
.match-lines {
  display: block;
  position: absolute;
  top: 50%;
  bottom: 0;
  margin-top: 0px;
  right: -1px;
}
.match-lines .line {
  background: red;
  position: absolute;
}
.match-lines .line.one {
  height: 1px;
  width: 12px;
}
.match-lines .line.two {
  height: 44px;
  width: 1px;
  left: 11px;
}
.match-lines.alt {
  left: -12px;
}
.match:nth-child(even) .match-lines .line.two {
  transform: translate(0, -100%);
}
.column:first-child .match-lines.alt {
  display: none;
}
.column:last-child .match-lines {
  display: none;
}
.column:last-child .match-lines.alt {
  display: block;
}
.column:nth-child(2) .match-lines .line.two {
  height: 88px;
}
.column:nth-child(3) .match-lines .line.two {
  height: 175px;
}
.column:nth-child(4) .match-lines .line.two {
  height: 262px;
}
.column:nth-child(5) .match-lines .line.two {
  height: 349px;
}
.disable-image .image,
.disable-seed .seed,
.disable-name .name,
.disable-score .score {
  display: none !important;
}
.disable-borders {
  border-width: 0px !important;
}
.disable-borders .team {
  border-width: 0px !important;
}
.disable-seperator .match-top {
  border-bottom: 0px !important;
}
.disable-seperator .match-bottom {
  border-top: 0px !important;
}
.disable-seperator .team:first-child {
  margin-bottom: 0px;
}

/* Dark Theme */
.theme-dark {
  background: #0e1217;
  border-color: #040607;
}
.theme-dark .match-lines .line {
  background: #36404e;
}
.theme-dark .team {
  background: #182026;
  border-color: #232c36;
  color: #6b798c;
}
.theme-dark .winner-top .match-top,
.theme-dark .winner-bottom .match-bottom {
  background: #232c36;
  color: #e3e8ef;
  border-color: #36404e;
  z-index: 1;
}
.theme-dark .winner-top .match-top .score,
.theme-dark .winner-bottom .match-bottom .score {
  color: #03d9ce;
}
.theme-dark .match .seed {
  font-size: 12px;
  min-width: 10px;
}
.theme-dark .match .score {
  font-size: 14px;
}

3. Customize the tournament bracket by overriding the defaulg Sass variables.

$font-size: 16px; 
$match-height: 62px;
$match-spacing: 24px;
$match-width: 240px; 
$border-size: 1px;
$border-radius: 2px;