CSS Multi Column 완벽 가이드

1
columns:  최소너비  최대개수;

1
2
3
4
5
6
7
<article>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum metus lacus, at euismod diam tempus ut. Nulla rutrum neque ut est varius, at semper magna dictum. Curabitur quam sem, auctor et nisl pellentesque, vulputate blandit nunc. Maecenas pharetra tortor vel ante pellentesque mattis. Integer consectetur metus rutrum mattis consectetur. Aenean sit amet mauris enim. Quisque varius eu eros ac dapibus. Nulla finibus dictum tortor a convallis. Integer mi dolor, finibus at mi a, luctus volutpat risus. Suspendisse elit urna, malesuada ut leo eget, tincidunt tristique enim. Vestibulum aliquam aliquam dignissim. Maecenas non placerat purus, vel cursus elit.
    Etiam molestie pharetra vulputate. Nam vehicula urna velit, sit amet fermentum enim elementum in. Vivamus tempor ultrices odio nec ultricies. Suspendisse ullamcorper blandit ante, quis condimentum libero eleifend nec. Sed a lacinia magna. Nulla et tortor ipsum. Pellentesque mollis libero ac turpis faucibus, vel consequat purus pulvinar. Vestibulum vestibulum elit id luctus auctor. Vestibulum commodo ac eros et maximus.
    Sed porttitor pellentesque lectus, eu maximus erat faucibus et. Duis iaculis erat ac maximus tincidunt. Cras ornare risus libero, in efficitur ex tincidunt sit amet. Donec lacus urna, ultricies a maximus ac, rhoncus sit amet justo. Suspendisse potenti. Nam at varius leo. Nam ultricies nunc felis, non elementum ligula convallis non. Nullam nunc dolor, mollis quis dictum ac, finibus vel libero. Cras pulvinar eros sit amet orci aliquet, quis consectetur justo ornare. Nulla dignissim ac sem ac bibendum.
  </p>
</article>

1
2
3
4
5
6
7
8
9
10
article {
  width: 700px;
  height: 450px;
  padding: 20px;
  border: 1px solid;
  border-radius: 4px;
}
p {
  margin: 0;
}

1
2
3
4
5
6
article {
  /* ... */
  columns: 200px 3;
  /* column-width: 200px; */
  /* column-count: 3; */
}

1
2
3
4
5
6
7
article {
  width: 700px;
  /* height: 450px; */
  padding: 20px;
  border: 1px solid;
  border-radius: 4px;
}

1
2
3
4
article {
  /* ... */
  column-width: 200px;
}

1
2
3
4
article {
  /* ... */
  column-count: 3;
}

1
2
3
4
5
6
article {
  /* ... */
  column-gap: 30px;
  /* gap: 30px; */
  /* gap: 0 30px; */
}

1
2
3
4
article {
  /* ... */
  column-rule: 1px solid;
}

1
2
3
4
article {
  /* ... */
  column-rule-width: 1px;
}

1
2
3
4
article {
  /* ... */
  column-rule-style: solid;
}

1
2
3
4
article {
  /* ... */
  column-rule-color: red;
}

1
2
3
4
article {
  /* ... */
  column-fill: auto;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
<article>
  <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum metus lacus, at euismod diam tempus ut.</p>
  <p>Nulla rutrum neque ut est varius, at semper magna dictum. Curabitur quam sem, auctor et nisl pellentesque, vulputate blandit nunc.</p>

  <h3>Aenean sit amet.</h3>
  <p>Maecenas pharetra tortor vel ante pellentesque mattis. Integer consectetur metus rutrum mattis consectetur.</p>
  <p>Aenean sit amet mauris enim. Quisque varius eu eros ac dapibus. Nulla finibus dictum tortor a convallis. Integer mi dolor, finibus at mi a, luctus volutpat risus. Suspendisse elit urna, malesuada ut leo eget, tincidunt tristique enim. Vestibulum aliquam aliquam dignissim. Maecenas non placerat purus, vel cursus elit.</p>

  <h3>Vivamus tempor.</h3>
  <p>Etiam molestie pharetra vulputate. Nam vehicula urna velit, sit amet fermentum enim elementum in. Vivamus tempor ultrices odio nec ultricies. Suspendisse ullamcorper blandit ante, quis condimentum libero eleifend nec. Sed a lacinia magna. Nulla et tortor ipsum.</p>
  <p>Pellentesque mollis libero ac turpis faucibus, vel consequat purus pulvinar. Vestibulum vestibulum elit id luctus auctor. Vestibulum commodo ac eros et maximus.</p>
</article>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
article {
  width: 700px;
  height: 400px;
  padding: 20px;
  border: 1px solid;
  border-radius: 4px;
  column-width: 200px;
  column-count: 3;
  column-gap: 30px;
  column-rule: 1px solid;
  column-fill: auto;
}
h2 {
  margin: 0;
  padding-bottom: 10px;
}
h3 {
  margin: 0;
  padding: 10px 0 5px;
}
p {
  margin: 0;
}

1
2
3
4
h2 {
  /* ... */
  column-span: all;
}

1
2
3
4
5
h3 {
  /* ... */
  border-top: 1px solid red;
  break-before: column;
}

1
2
3
4
5
h3 {
  /* ... */
  border-bottom: 1px solid red;
  break-after: column;
}

1
2
3
4
5
6
7
8
9
10
11
12
/* ... */
h3 {
  margin: 0;
  padding: 10px 0 5px;
  border: 1px solid red;
  /* border-bottom: 1px solid red; */
  /* break-after: column; */
}
p {
  margin: 0;
  border: 1px solid red;
}

1
2
3
4
5
/* ... */
p {
  /* ... */
  break-inside: avoid;
}