stretch the steps

[Longhuiberkeley]

Hello, I want to build a walking path thing for my educational app.
Here's a rough demo picture:

Question 1. There's no way the steps can be connected and split up into multiple paths, or change direction, right?

Question 2. My current implementation, I am using a grid to

<div class="col-span-3">
    <ul className="steps">
        <li data-content="?" className="step step-primary">Ch1.1</li>
        <li data-content="!" className="step step-primary">Ch1.2</li>
        <li data-content="✓" className="step step-neutral">1.3</li>
        <li data-content="✕" className="step step-neutral">1.4</li>
        <li data-content="★" className="step step-neutral">1.5</li>
        <li data-content="" className="step step-neutral">1.6</li>
        <li data-content="●" className="step step-neutral">1.7</li>
        <li data-content="✕" className="step step-neutral">1.8</li>
        <li data-content="★" className="step step-neutral">1.9</li>
        <li data-content="" className="step step-neutral">1.10</li>
        
    </ul>
</div>

<div className="row-span-2">
    <ul className="steps steps-vertical">
        <li className="step">Ch2.1</li>
        <li className="step step-neutral">Ch2.2</li>
        <li className="step step-neutral">Ch2.3</li>
        <li className="step step-neutral">Ch2.4</li>
    </ul></div>


<div class="col-span-3 justify-stretch justify-items-stretch">
    <ul className="steps justify-stretch justify-items-stretch">
        <li data-content="?" className="step step-neutral">3.7</li>
        <li data-content="!" className="step step-neutral">3.6</li>
        <li data-content="✓" className="step step-neutral">3.5</li>
        <li data-content="✕" className="step step-neutral">3.4</li>
        <li data-content="★" className="step step-neutral">3.3</li>
        <li data-content="" className="step step-neutral">Ch3.2</li>
        <li data-content="●" className="step step-neutral">Ch3.1</li>
    </ul>
</div>

Is there anyway that I can use something like a className="some-stretch" to make Ch3 step line longer and seem more connected?

I appreciate any idea or feedback. Sorry, I am a noob, and don't quite know how to do this... Thanks in advance

[saadeghi]

steps is for mainly for a simple list. It is possible to do more modifications, it it would be challenging.
On the other hand, there's timeline which gives you all the markup you can modify, change sizes, positions, colors, etc…

I would suggest using timeline in this case.

Let me know if you have a question.