CSS를 사용하여 다중 열 레이아웃을 구현하는 방법

<p >
<p style="background-color:red">1</p>
<p style="background-color:yellow">2</p>
<p style="background-color:blue">3</p>
</p>

        p>p{
            border:1px solid black;
            float:left;
            width:200px;
            height: 200px;
            text-align: center;
        }

        p>p{
            display:inline-block;
            border:1px solid black;
            text-align:center;
            width:200px;
            height: 200px;
            vertical-align: top;
        }

        p{
            display: flex;
            flex-direction: row;
            height:200px;
            width: 600px;
        }
        p>p{
            border:1px solid black;
        }