why does my column become vertical, not as design?-CodePudding

I am a newbie with HTML CSS and here is my problem.

I coded a very simple HTML CSS program and here is my HTML CSS program

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }
            .col {
            text-align: center;
            background-color: #ccc;
            background-clip: content-box;
            margin-top: 8px;
            margin-bottom: 8px;
        }
            body {
            margin: 0;
            }
            .container {
            text-align: center;
            }
            .course-item {
            background-color: orange;
            height: 260px;
            }
            h1 {
            color: #fff;
            line-height: 260px;
            }
        </style>
        </head>
      <body>
      <div >
        <div >

            <div >
                <div >
                    <h1>course 1</h1>
                </div>
            </div>
            <div >
                <div >
                    <h1>course 2</h1>
                </div>
            </div>
            <div >
                <div >
                    <h1>course 3</h1>
                </div>
            </div>
            <div >
                <div >
                    <h1>course 4</h1>
                </div>
            </div>
        </div>
        </div>
       </body>
      </html>

Here is my css program

    .grid {
    width: 100%;
    display: block;
    padding: 0;
    }
    .grid.wide {
    max-width: 1200px;
    margin: 0 auto;
    }
    .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -4px;
    margin-right: -4px;
    }
    .row.no-gutters {
    margin-left: 0;
    margin-right: 0;
    }
    .col {
    padding-left: 4px;
    padding-right: 4px;
    }
    .row.no-gutters .col {
    padding-left: 0;
    padding-right: 0;
    }

My problem is, I want the block to be row, not to be vertical, as you can see in this picture

Here is my design, as you can see, the block is horizontal

So, could you please help me to solve this problem? How can I make it to be horizontal? Thank you very much for your time.

CodePudding user response：

Define a width for your course-items and it should work just fine. I made it the same width as your height, for a perfect square.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
      box-sizing: border-box;
    }

    .col {
      text-align: center;

      margin-top: 8px;
      margin-bottom: 8px;
    }

    body {
      margin: 0;
    }

    .container {
      text-align: center;
    }

    .course-item {
      background-color: orange;
      height: 260px;
      width: 260px;
    }

    h1 {
      color: #fff;
      line-height: 260px;
    }



    .row {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      margin-left: -4px;
      margin-right: -4px;
    }

    .row.no-gutters {
      margin-left: 0;
      margin-right: 0;
    }

    .col {
      padding-left: 4px;
      padding-right: 4px;
    }
</style>
</head>
  <body>
  <div >
    <div >

        <div >
            <div >
                <h1>course 1</h1>
            </div>
        </div>
        <div >
            <div >
                <h1>course 2</h1>
            </div>
        </div>
        <div >
            <div >
                <h1>course 3</h1>
            </div>
        </div>
        <div >
            <div >
                <h1>course 4</h1>
            </div>
        </div>
    </div>
    </div>
   </body>
  </html>

CodePudding user response：

(probably optional, but as it isn't clear how it is currently configured, in .row { ... } use flex-flow: row wrap; instead of flex-wrap: wrap;).

In .col { ... } add flex: 1 0 auto;.

Experiment with the 1 0 in there to adjust the grow/shrink (1 1 or 0 0 may be preferable depending on your desires).