I am trying to create a bracket for a sports tournament in HTML and CSS (using JS later to be able to interact with it).
So far my concept is to use containers with only the top, bottom, and right-side borders to create this effect. I apologize for the crudeness, but something like this (the solid lines are solid borders and the dashed lines are borders that are not present). However, I am not able to find how to align the containers with each other the way I want.
How do you align containers by their borders and midlines? (align the top border of one div container in-line with the horizontal midline of another container)
So far I have asked lady Google a bunch, poked around Stack Overflow, and read MDN resources, but I cannot find anything that fits with my problem.
The next thing I am going to try is using a bunch of containers to get the positions I want by stacking them to fit, but I feel like that is going to get messy quickly, so I figured I would see if there are any better solutions out there.
Any nudge in the right direction/similar post or online resource/advice/fix would be greatly appreciated 🙂
New contributor
Jazzwal is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
4
I come up with something like this! Hope this helps. It will auto adjust depending on the items in columns. I also added placeholders where the team names probably will be
<code>.team-name {
background: red;
position: absolute;
right: 0;
top: 0;
transform: translate(50%, -50%);
}
.path.root {
border: solid calc(var(--border-width) / 2) black;
height: 0;
}
.path {
--border-width: 4px;
height: 50%;
top: 50%;
transform: translateY(-50%);
position: absolute;
width: 100%;
border: solid var(--border-width) black;
border-left: none;
box-sizing: border-box;
}
.path-content {
height: 100%;
width: 100%;
position: relative;
}
.wrapper {
height: 400px;
width: 100%;
position: relative;
display: flex;
}
.col {
display: flex;
flex: 1;
flex-direction: column;
}
.col>div {
flex: 1;
position: relative;
}</code>
<code>.team-name {
background: red;
position: absolute;
right: 0;
top: 0;
transform: translate(50%, -50%);
}
.path.root {
border: solid calc(var(--border-width) / 2) black;
height: 0;
}
.path {
--border-width: 4px;
height: 50%;
top: 50%;
transform: translateY(-50%);
position: absolute;
width: 100%;
border: solid var(--border-width) black;
border-left: none;
box-sizing: border-box;
}
.path-content {
height: 100%;
width: 100%;
position: relative;
}
.wrapper {
height: 400px;
width: 100%;
position: relative;
display: flex;
}
.col {
display: flex;
flex: 1;
flex-direction: column;
}
.col>div {
flex: 1;
position: relative;
}</code>
.team-name {
background: red;
position: absolute;
right: 0;
top: 0;
transform: translate(50%, -50%);
}
.path.root {
border: solid calc(var(--border-width) / 2) black;
height: 0;
}
.path {
--border-width: 4px;
height: 50%;
top: 50%;
transform: translateY(-50%);
position: absolute;
width: 100%;
border: solid var(--border-width) black;
border-left: none;
box-sizing: border-box;
}
.path-content {
height: 100%;
width: 100%;
position: relative;
}
.wrapper {
height: 400px;
width: 100%;
position: relative;
display: flex;
}
.col {
display: flex;
flex: 1;
flex-direction: column;
}
.col>div {
flex: 1;
position: relative;
}<code><div class="wrapper">
<div class="col">
<div>
<div class="path"></div>
</div>
<div>
<div class="path"></div>
</div>
<div>
<div class="path"></div>
</div>
<div>
<div class="path"></div>
</div>
</div>
<div class="col">
<div>
<div class="path">
<div class="path-content">
<div class="team-name">Team 1</div>
</div>
</div>
</div>
<div>
<div class="path">
<div class="path-content">
<div class="team-name">Team 2</div>
</div>
</div>
</div>
</div>
<div class="col">
<div>
<div class="path"></div>
</div>
</div>
<div class="col">
<div>
<div class="path root"></div>
</div>
</div>
</div></code>
<code><div class="wrapper">
<div class="col">
<div>
<div class="path"></div>
</div>
<div>
<div class="path"></div>
</div>
<div>
<div class="path"></div>
</div>
<div>
<div class="path"></div>
</div>
</div>
<div class="col">
<div>
<div class="path">
<div class="path-content">
<div class="team-name">Team 1</div>
</div>
</div>
</div>
<div>
<div class="path">
<div class="path-content">
<div class="team-name">Team 2</div>
</div>
</div>
</div>
</div>
<div class="col">
<div>
<div class="path"></div>
</div>
</div>
<div class="col">
<div>
<div class="path root"></div>
</div>
</div>
</div></code>
<div class="wrapper">
<div class="col">
<div>
<div class="path"></div>
</div>
<div>
<div class="path"></div>
</div>
<div>
<div class="path"></div>
</div>
<div>
<div class="path"></div>
</div>
</div>
<div class="col">
<div>
<div class="path">
<div class="path-content">
<div class="team-name">Team 1</div>
</div>
</div>
</div>
<div>
<div class="path">
<div class="path-content">
<div class="team-name">Team 2</div>
</div>
</div>
</div>
</div>
<div class="col">
<div>
<div class="path"></div>
</div>
</div>
<div class="col">
<div>
<div class="path root"></div>
</div>
</div>
</div>4
You could use CSS grid – the number of columns being the number of rounds + 1 and the number of rows being (number of rounds) * (number of rounds).
For a general solution I imagine you will want to code this [depending on where the data is and how it is presented this might be in Javascript or on some backend scripting].
This snippet demonstrates the idea with 4 rounds – so 16 players (or teams) to begin with.
The lines are drawn using linear-gradients.
<code><style>
* {
margin: 0;
}
.rounds {
display: grid;
--n: 5;
grid-template-columns: var(--n);
gap: 0;
grid-auto-flow: dense;
width: 100vw;
height: 100vh;
}
.rounds>* {
display: contents;
font-size: calc(100vh / (1.5 * (var(--n) * var(--n))));
/* for demo so it fits */
}
.rounds>*>* {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
background-repeat: no-repeat no-repeat;
}
.rounds>*>*>span {
transform: translateY(calc(-100% + 0.5em));
}
.rounds>*>*:nth-child(odd) {
background-image: linear-gradient(transparent 0 calc(50% - 1px), black calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) 100%), linear-gradient(to right, transparent 0 98%, black 98% 100%);
background-size: 100% 100%, 100% 50%;
background-position: 0 0, 0 bottom;
}
.rounds>*>*:nth-child(even) {
background-image: linear-gradient(transparent 0 calc(50% - 1px), black calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) 100%), linear-gradient(to right, transparent 0 98%, black 98% 100%);
background-size: 100% 100%, 100% 50%;
background-position: 0 0, 0 top;
}
.rounds>*:last-child>*:last-child {
background-image: linear-gradient(transparent 0 calc(50% - 1px), black calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) 100%);
}
.rounds>*:nth-child(1)>* {
grid-column: 1;
}
.rounds>*:nth-child(2)>* {
grid-column: 2;
grid-row: span 2;
}
.rounds>*:nth-child(3)>* {
grid-column: 3;
grid-row: span 4;
}
.rounds>*:nth-child(4)>* {
grid-column: 4;
grid-row: span 8;
}
.rounds>*:nth-child(5)>* {
grid-column: 5;
grid-row: span 16;
}
</style>
<body>
<div class="rounds">
<div class="round">
<div class="entry"><span>A</span></div>
<div class="entry"><span>B</span></div>
<div class="entry"><span>C</span></div>
<div class="entry"><span>D</span></div>
<div class="entry"><span>E</span></div>
<div class="entry"><span>F</span></div>
<div class="entry"><span>G</span></div>
<div class="entry"><span>H</span></div>
<div class="entry"><span>I</span></div>
<div class="entry"><span>J</span></div>
<div class="entry"><span>K</span></div>
<div class="entry"><span>L</span></div>
<div class="entry"><span>M</span></div>
<div class="entry"><span>N</span></div>
<div class="entry"><span>O</span></div>
<div class="entry"><span>P</span></div>
</div>
<div class="round">
<div class="entry"><span>A</span></div>
<div class="entry"><span>C</span></div>
<div class="entry"><span>E</span></div>
<div class="entry"><span>G</span></div>
<div class="entry"><span>I</span></div>
<div class="entry"><span>K</span></div>
<div class="entry"><span>M</span></div>
<div class="entry"><span>O</span></div>
</div>
<div class="round">
<div class="entry"><span>A</span></div>
<div class="entry"><span>E</span></div>
<div class="entry"><span>I</span></div>
<div class="entry"><span>M</span></div>
</div>
<div class="round">
<div class="entry"><span>A</span></div>
<div class="entry"><span>I</span></div>
</div>
<div class="round">
<div class="entry"><span>A</span></div>
</div>
</div>
</body></code>
<code><style>
* {
margin: 0;
}
.rounds {
display: grid;
--n: 5;
grid-template-columns: var(--n);
gap: 0;
grid-auto-flow: dense;
width: 100vw;
height: 100vh;
}
.rounds>* {
display: contents;
font-size: calc(100vh / (1.5 * (var(--n) * var(--n))));
/* for demo so it fits */
}
.rounds>*>* {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
background-repeat: no-repeat no-repeat;
}
.rounds>*>*>span {
transform: translateY(calc(-100% + 0.5em));
}
.rounds>*>*:nth-child(odd) {
background-image: linear-gradient(transparent 0 calc(50% - 1px), black calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) 100%), linear-gradient(to right, transparent 0 98%, black 98% 100%);
background-size: 100% 100%, 100% 50%;
background-position: 0 0, 0 bottom;
}
.rounds>*>*:nth-child(even) {
background-image: linear-gradient(transparent 0 calc(50% - 1px), black calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) 100%), linear-gradient(to right, transparent 0 98%, black 98% 100%);
background-size: 100% 100%, 100% 50%;
background-position: 0 0, 0 top;
}
.rounds>*:last-child>*:last-child {
background-image: linear-gradient(transparent 0 calc(50% - 1px), black calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) 100%);
}
.rounds>*:nth-child(1)>* {
grid-column: 1;
}
.rounds>*:nth-child(2)>* {
grid-column: 2;
grid-row: span 2;
}
.rounds>*:nth-child(3)>* {
grid-column: 3;
grid-row: span 4;
}
.rounds>*:nth-child(4)>* {
grid-column: 4;
grid-row: span 8;
}
.rounds>*:nth-child(5)>* {
grid-column: 5;
grid-row: span 16;
}
</style>
<body>
<div class="rounds">
<div class="round">
<div class="entry"><span>A</span></div>
<div class="entry"><span>B</span></div>
<div class="entry"><span>C</span></div>
<div class="entry"><span>D</span></div>
<div class="entry"><span>E</span></div>
<div class="entry"><span>F</span></div>
<div class="entry"><span>G</span></div>
<div class="entry"><span>H</span></div>
<div class="entry"><span>I</span></div>
<div class="entry"><span>J</span></div>
<div class="entry"><span>K</span></div>
<div class="entry"><span>L</span></div>
<div class="entry"><span>M</span></div>
<div class="entry"><span>N</span></div>
<div class="entry"><span>O</span></div>
<div class="entry"><span>P</span></div>
</div>
<div class="round">
<div class="entry"><span>A</span></div>
<div class="entry"><span>C</span></div>
<div class="entry"><span>E</span></div>
<div class="entry"><span>G</span></div>
<div class="entry"><span>I</span></div>
<div class="entry"><span>K</span></div>
<div class="entry"><span>M</span></div>
<div class="entry"><span>O</span></div>
</div>
<div class="round">
<div class="entry"><span>A</span></div>
<div class="entry"><span>E</span></div>
<div class="entry"><span>I</span></div>
<div class="entry"><span>M</span></div>
</div>
<div class="round">
<div class="entry"><span>A</span></div>
<div class="entry"><span>I</span></div>
</div>
<div class="round">
<div class="entry"><span>A</span></div>
</div>
</div>
</body></code>
<style>
* {
margin: 0;
}
.rounds {
display: grid;
--n: 5;
grid-template-columns: var(--n);
gap: 0;
grid-auto-flow: dense;
width: 100vw;
height: 100vh;
}
.rounds>* {
display: contents;
font-size: calc(100vh / (1.5 * (var(--n) * var(--n))));
/* for demo so it fits */
}
.rounds>*>* {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
background-repeat: no-repeat no-repeat;
}
.rounds>*>*>span {
transform: translateY(calc(-100% + 0.5em));
}
.rounds>*>*:nth-child(odd) {
background-image: linear-gradient(transparent 0 calc(50% - 1px), black calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) 100%), linear-gradient(to right, transparent 0 98%, black 98% 100%);
background-size: 100% 100%, 100% 50%;
background-position: 0 0, 0 bottom;
}
.rounds>*>*:nth-child(even) {
background-image: linear-gradient(transparent 0 calc(50% - 1px), black calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) 100%), linear-gradient(to right, transparent 0 98%, black 98% 100%);
background-size: 100% 100%, 100% 50%;
background-position: 0 0, 0 top;
}
.rounds>*:last-child>*:last-child {
background-image: linear-gradient(transparent 0 calc(50% - 1px), black calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) 100%);
}
.rounds>*:nth-child(1)>* {
grid-column: 1;
}
.rounds>*:nth-child(2)>* {
grid-column: 2;
grid-row: span 2;
}
.rounds>*:nth-child(3)>* {
grid-column: 3;
grid-row: span 4;
}
.rounds>*:nth-child(4)>* {
grid-column: 4;
grid-row: span 8;
}
.rounds>*:nth-child(5)>* {
grid-column: 5;
grid-row: span 16;
}
</style>
<body>
<div class="rounds">
<div class="round">
<div class="entry"><span>A</span></div>
<div class="entry"><span>B</span></div>
<div class="entry"><span>C</span></div>
<div class="entry"><span>D</span></div>
<div class="entry"><span>E</span></div>
<div class="entry"><span>F</span></div>
<div class="entry"><span>G</span></div>
<div class="entry"><span>H</span></div>
<div class="entry"><span>I</span></div>
<div class="entry"><span>J</span></div>
<div class="entry"><span>K</span></div>
<div class="entry"><span>L</span></div>
<div class="entry"><span>M</span></div>
<div class="entry"><span>N</span></div>
<div class="entry"><span>O</span></div>
<div class="entry"><span>P</span></div>
</div>
<div class="round">
<div class="entry"><span>A</span></div>
<div class="entry"><span>C</span></div>
<div class="entry"><span>E</span></div>
<div class="entry"><span>G</span></div>
<div class="entry"><span>I</span></div>
<div class="entry"><span>K</span></div>
<div class="entry"><span>M</span></div>
<div class="entry"><span>O</span></div>
</div>
<div class="round">
<div class="entry"><span>A</span></div>
<div class="entry"><span>E</span></div>
<div class="entry"><span>I</span></div>
<div class="entry"><span>M</span></div>
</div>
<div class="round">
<div class="entry"><span>A</span></div>
<div class="entry"><span>I</span></div>
</div>
<div class="round">
<div class="entry"><span>A</span></div>
</div>
</div>
</body>2
you can use postion top right left etc and margin also to align divs where u want
New contributor
SALMAN GRAPHIX DEV is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
4