<!DOCTYPE html>
<
html
>
<
head
>
<
title
>HTML | DOM Style columnFill Property</
title
>
<
style
>
#container {
column-count: 3;
column-gap: 20px;
height: auto;
column-fill: auto;
padding-top: 20px;
}
.root {
width: 90%;
padding: 10px;
}
button {
padding: 10px 20px;
background-color: #0056b3;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: skyblue;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"root"
>
<
h1
>HTML DOM Style columnFill Property</
h1
>
<
div
class
=
"mybtn"
>
<
button
onclick
=
"setColumnFill('balance')"
>Set to Balance</
button
>
<
button
onclick
=
"setColumnFill('auto')"
>Set to Auto</
button
>
</
div
>
<
div
id
=
"container"
>
<
p
>
HTML stands for HyperText Markup Language.
It is used to design web pages using a markup language.
HTML is a combination of Hypertext and Markup language.
Hypertext defines the link between web pages.
A markup language is used to define the text document
within the tag which defines the structure of web pages.
This language is used to annotate (make notes for the computer)
text so that a machine can understand it and manipulate text accordingly.
</
p
>
</
div
>
</
div
>
<
script
>
function setColumnFill(fillMode) {
document.getElementById("container").style.columnFill = fillMode;
}
</
script
>
</
body
>
</
html
>