CODEWITHSUNDEEP
htmlcss
Iso
Iso

Reputation: 93

css make items go horizontally with grid

/* GLOBAL */
* {
    font-family: sans-serif;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* MAIN */
.container {
    display: grid;
    place-content: center;
    min-height: 50vh;
}

.main {
    border: 2px solid black;
    padding: 5px 60px 80px 60px; 
    border-radius: 2px;

}

.btn {
    width: 100%;
    background-color: #2cdb2c;
    border-radius: 4px;
    border: none;

}

.workouts {
    display: grid;
    line-height: 1.2rem;
    border-top: 2px solid #b8b8b8;
    width: 100vw;
    height: 100vh;
    text-align: center;
    padding-top: 12px; 
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(900px, 1fr));
    grid-auto-rows: 240px;

}

.workout {
    background-color: #b8b8b8;
    width: 15%;
    padding-top: 20px;
    border-radius: 6px;
}

/* BUTTONS */
.btn {
    width: 100%;
    line-height: 2rem;
    padding-top: 8px;
    background-color: #11992c;
    color: white;
    border-radius: 6px;
    border: none;
    transition: all 0.1s ease-in-out;

}

.btn-workout {
    width: 50%;
    line-height: 2rem;
    padding-top: 8px;
    background-color: #11992c;
    color: white;
    border-radius: 6px;
    border: none;
    transition: all 0.1s ease-in-out;

}

.btn-text {
    font-weight: 500;
    font-size: 20px;
}

.btn:hover {
    opacity: 0.7;
    cursor: pointer;
    border-radius: 8px;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="index.css">
    <title>Workout App</title>
</head>
<body>

<div class="container">
    <div class="main">
        <h2>
            WorkoutApp
            <div>
                <button class="btn btn-text" id="addBtn">
                    Add Workout
                </button>
            </div>
        </h2>   
    </div>
</div>

    <div class="workouts">
        <div class="workout">
            <h2>Name: <span>Test1</span></h2>
            <p>3 sets of 20</p>
            <button class="btn-workout">Done</button>
        </div>
        <div class="workout">
            <h2>Name: <span>Test2</span></h2>
            <p>3 sets of 20</p>
            <button class="btn-workout">Done</button>
        </div>
        <div class="workout">
            <h2>Name: <span>Test3</span></h2>
            <p>3 sets of 20</p>
            <button class="btn-workout">Done</button>
        </div>
    </div>

</body>
</html>

I want to make those task boxes with the class of "workout" which its parent's class is "workout" go horizontally, but I just dont know how to, any help is appreciated! // And yes my css is atrocious so telling me what i can alter is an extra! Unrelated question: How can i make the button that is in the 'h2 tag' not affect the position of the 'h2 tag'

Upvotes: 1

Views: 309

Answers (1)

Tanner Dolby
Tanner Dolby

Reputation: 4421

You have repeating grid columns that are minimum 900px or maximum 1fr. This means that each grid column will be sized at minimum 900px which is quite big, for multiple grid items to appear in a horizontal row format the viewport width would have to be atleast 1800px to account for the space of two 900px grid columns.

Since your defining an explicit width: 15% on the grid items, this is restricting them from filling their entire grid area. If you update your grid-template-columns usage to make the minimum column size smaller, lets say 200px (or whatever you see fit) then remove the width: 15% on .workout grid items then you will have the horizontal row layout you are looking for.

/* GLOBAL */
* {
    font-family: sans-serif;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* MAIN */
.container {
    display: grid;
    place-content: center;
    min-height: 50vh;
}

.main {
    border: 2px solid black;
    padding: 5px 60px 80px 60px; 
    border-radius: 2px;

}

.btn {
    width: 100%;
    background-color: #2cdb2c;
    border-radius: 4px;
    border: none;

}

.workouts {
    display: grid;
    line-height: 1.2rem;
    border-top: 2px solid #b8b8b8;
    width: 100vw;
    height: 100vh;
    text-align: center;
    padding-top: 12px; 
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: 240px;

}

.workout {
    background-color: #b8b8b8;
    width: auto;
    padding-top: 20px;
    border-radius: 6px;
}

/* BUTTONS */
.btn {
    width: 100%;
    line-height: 2rem;
    padding-top: 8px;
    background-color: #11992c;
    color: white;
    border-radius: 6px;
    border: none;
    transition: all 0.1s ease-in-out;

}

.btn-workout {
    width: 50%;
    line-height: 2rem;
    padding-top: 8px;
    background-color: #11992c;
    color: white;
    border-radius: 6px;
    border: none;
    transition: all 0.1s ease-in-out;

}

.btn-text {
    font-weight: 500;
    font-size: 20px;
}

.btn:hover {
    opacity: 0.7;
    cursor: pointer;
    border-radius: 8px;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="index.css">
    <title>Workout App</title>
</head>
<body>

<div class="container">
    <div class="main">
        <h2>
            WorkoutApp
            <div>
                <button class="btn btn-text" id="addBtn">
                    Add Workout
                </button>
            </div>
        </h2>   
    </div>
</div>

    <div class="workouts">
        <div class="workout">
            <h2>Name: <span>Test1</span></h2>
            <p>3 sets of 20</p>
            <button class="btn-workout">Done</button>
        </div>
        <div class="workout">
            <h2>Name: <span>Test2</span></h2>
            <p>3 sets of 20</p>
            <button class="btn-workout">Done</button>
        </div>
        <div class="workout">
            <h2>Name: <span>Test3</span></h2>
            <p>3 sets of 20</p>
            <button class="btn-workout">Done</button>
        </div>
        <div class="workout">
            <h2>Name: <span>Test4</span></h2>
            <p>4 sets of 20</p>
            <button class="btn-workout">Done</button>
        </div>
    </div>

</body>
</html>

Upvotes: 2

Related Questions