CSS | Columnas Propiedad

Posted on by Rudeus Greyrat

En CSS, la propiedad de columnas se usa para establecer el número de columnas y el ancho de las columnas. Esta es una propiedad abreviada y puede tomar múltiples valores a la vez.

Sintaxis:

columns: column-width columns-count | auto | initial | inherit;

Valores de propiedad:

  • auto: Esto establece los valores de ancho de columna y recuento de columnas en sus valores predeterminados del navegador.

    Sintaxis:

    columns: auto auto;

    Ejemplo 1: uso de auto como valor.

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | columns Property
        </title>
        <style>
            body {
                text-align: center;
                color: green;
            }
              
            .GFG {
                -webkit-columns: auto auto;
                /* Chrome, Safari, Opera */
                -moz-columns: auto auto;
                /* Firefox */
                columns: auto auto;
            }
        </style>
    </head>
      
    <body>
      
        <h1>The column Property</h1>
      
        <div class="GFG">
            <h2>Welcome to the world of Geeks!!</h2> 
              How many times were you frustrated while 
              looking out for a good collection of
              programming/algorithm/interview questions? 
              What did you expect and what did you get? 
              This portal has been created to provide well 
              written, well thought and well-explained 
              solutions for selected questions.
      
            <p>
                <strong>Our team includes:</strong>
                <p>
                    Sandeep Jain: An IIT Roorkee alumnus 
                  and founder of GeeksforGeeks. He loves 
                  to solve programming problems in most 
                  efficient ways. Apart from GeeksforGeeks,
                  he has worked with DE Shaw and Co. as a 
                  software developer and JIIT Noida as an
                  assistant professor.
                </p>
      
                <p>
                    Vaibhav Bajpai: Amazed by computer 
                  science,he is a technology enthusiast who 
                  enjoys being a part of a development. Off
                  from work, you canfind him in love with 
                  movies, food, and friends.
                </p>
      
                <p>
                    Shikhar Goel: A Computer Science graduate
                  who likes to make things simpler. When he's
                  not working, you can find him surfing the web,
                  learning facts, tricks and life hacks. 
                  He also enjoys movies in his leisure time.
                </p>
      
                <p>
                    Dharmesh Singh: A software developer who 
                  is always trying to push boundaries in search
                  of great breakthroughs. Off from his desk,
                  you can find him cheering up his buddies 
                  and enjoying life.
                </p>
      
                <p>
                    Shubham Baranwal: A passionate developer 
                  who always tries to learn new technology and
                  software. In his free time, either he reads 
                  some articles or learns some other stuff.
                </p>
            </p>
        </div>
    </body>
      
    </html>

    Producción:

    Nota: Si no se especifica alguno de los valores entre el ancho de columna y el recuento de columnas, el navegador asume su valor como automático de forma predeterminada.

  • entero: Esto se usa para especificar el ancho de columna y el recuento de columnas usando valores enteros.

    Sintaxis:

    columns: column-width column-count;

    Ejemplo 2:

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | columns Property
        </title>
        <style>
            body {
                text-align: center;
                color: green;
            }
              
            .GFG {
                -webkit-columns: 60px 5;
                /* Chrome, Safari, Opera */
                -moz-columns: 60px 5;
                /* Firefox */
                columns: 60px 5;
            }
        </style>
    </head>
      
    <body>
      
        <h1>The column Property</h1>
      
        <div class="GFG">
            <h2>Welcome to the world of Geeks!!</h2> 
              How many times were you frustrated while 
              looking out for a good collection of
              programming/algorithm/interview questions? 
              What did you expect and what did you get? 
              This portal has been created to provide well 
              written, well thought and well-explained 
              solutions for selected questions.
      
            <p>
                <strong>Our team includes:</strong>
                <p>
                    Sandeep Jain: An IIT Roorkee alumnus 
                  and founder of GeeksforGeeks. He loves 
                  to solve programming problems in most 
                  efficient ways. Apart from GeeksforGeeks,
                  he has worked with DE Shaw and Co. as a 
                  software developer and JIIT Noida as an
                  assistant professor.
                </p>
      
                <p>
                    Vaibhav Bajpai: Amazed by computer 
                  science,he is a technology enthusiast who 
                  enjoys being a part of a development. Off
                  from work, you canfind him in love with 
                  movies, food, and friends.
                </p>
      
                <p>
                    Shikhar Goel: A Computer Science graduate
                  who likes to make things simpler. When he's
                  not working, you can find him surfing the web,
                  learning facts, tricks and life hacks. 
                  He also enjoys movies in his leisure time.
                </p>
      
                <p>
                    Dharmesh Singh: A software developer who 
                  is always trying to push boundaries in search
                  of great breakthroughs. Off from his desk,
                  you can find him cheering up his buddies 
                  and enjoying life.
                </p>
      
                <p>
                    Shubham Baranwal: A passionate developer 
                  who always tries to learn new technology and
                  software. In his free time, either he reads 
                  some articles or learns some other stuff.
                </p>
            </p>
        </div>
    </body>
      
    </html>

    Producción:

  • initial: inicializa los valores a sus valores predeterminados iniciales.

    Sintaxis:

    columns: initial initial;

    Ejemplo 3:

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | columns Property
        </title>
        <style>
            body {
                text-align: center;
                color: green;
            }
              
            .GFG {
                -webkit-columns: initial initial;
                /* Chrome, Safari, Opera */
                -moz-columns: initial initial;
                /* Firefox */
                columns: initial initial;
            }
        </style>
    </head>
      
    <body>
      
        <h1>The column Property</h1>
      
        <div class="GFG">
            <h2>Welcome to the world of Geeks!!</h2> 
              How many times were you frustrated while 
              looking out for a good collection of
              programming/algorithm/interview questions? 
              What did you expect and what did you get? 
              This portal has been created to provide well 
              written, well thought and well-explained 
              solutions for selected questions.
      
            <p>
                <strong>Our team includes:</strong>
                <p>
                    Sandeep Jain: An IIT Roorkee alumnus 
                  and founder of GeeksforGeeks. He loves 
                  to solve programming problems in most 
                  efficient ways. Apart from GeeksforGeeks,
                  he has worked with DE Shaw and Co. as a 
                  software developer and JIIT Noida as an
                  assistant professor.
                </p>
      
                <p>
                    Vaibhav Bajpai: Amazed by computer 
                  science,he is a technology enthusiast who 
                  enjoys being a part of a development. Off
                  from work, you canfind him in love with 
                  movies, food, and friends.
                </p>
      
                <p>
                    Shikhar Goel: A Computer Science graduate
                  who likes to make things simpler. When he's
                  not working, you can find him surfing the web,
                  learning facts, tricks and life hacks. 
                  He also enjoys movies in his leisure time.
                </p>
      
                <p>
                    Dharmesh Singh: A software developer who 
                  is always trying to push boundaries in search
                  of great breakthroughs. Off from his desk,
                  you can find him cheering up his buddies 
                  and enjoying life.
                </p>
      
                <p>
                    Shubham Baranwal: A passionate developer 
                  who always tries to learn new technology and
                  software. In his free time, either he reads 
                  some articles or learns some other stuff.
                </p>
            </p>
        </div>
    </body>
      
    </html>

    Producción:

  • heredar: Hereda el valor de su elemento padre.

    Sintaxis:

    columns: inherit inherit;

    Ejemplo 4:

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | columns Property
        </title>
        <style>
            body {
                text-align: center;
                color: green;
            }
              
            .GFG {
                -webkit-columns: inherit inherit;
                /* Chrome, Safari, Opera */
                -moz-columns: inherit inherit;
                /* Firefox */
                columns: inherit inherit;
            }
        </style>
    </head>
      
    <body>
      
        <h1>The column Property</h1>
      
        <div class="GFG">
            <h2>Welcome to the world of Geeks!!</h2> 
              How many times were you frustrated while 
              looking out for a good collection of
              programming/algorithm/interview questions? 
              What did you expect and what did you get? 
              This portal has been created to provide well 
              written, well thought and well-explained 
              solutions for selected questions.
      
            <p>
                <strong>Our team includes:</strong>
                <p>
                    Sandeep Jain: An IIT Roorkee alumnus 
                  and founder of GeeksforGeeks. He loves 
                  to solve programming problems in most 
                  efficient ways. Apart from GeeksforGeeks,
                  he has worked with DE Shaw and Co. as a 
                  software developer and JIIT Noida as an
                  assistant professor.
                </p>
      
                <p>
                    Vaibhav Bajpai: Amazed by computer 
                  science,he is a technology enthusiast who 
                  enjoys being a part of a development. Off
                  from work, you canfind him in love with 
                  movies, food, and friends.
                </p>
      
                <p>
                    Shikhar Goel: A Computer Science graduate
                  who likes to make things simpler. When he's
                  not working, you can find him surfing the web,
                  learning facts, tricks and life hacks. 
                  He also enjoys movies in his leisure time.
                </p>
      
                <p>
                    Dharmesh Singh: A software developer who 
                  is always trying to push boundaries in search
                  of great breakthroughs. Off from his desk,
                  you can find him cheering up his buddies 
                  and enjoying life.
                </p>
      
                <p>
                    Shubham Baranwal: A passionate developer 
                  who always tries to learn new technology and
                  software. In his free time, either he reads 
                  some articles or learns some other stuff.
                </p>
            </p>
        </div>
    </body>
      
    </html>
      
      
    </html>

    Producción:

Navegador compatible: los navegadores compatibles con las columnas Propiedad se enumeran a continuación:

  • Chrome 50.0, 4.0 -webkit-
  • Borde 10.0
  • Firefox 52.0, 9.0 -moz-
  • Opera 37.0, 15.0 -webkit- 11.1
  • Safari 9.0, 3.1 -webkit-

Publicación traducida automáticamente

Artículo escrito por DannanaManoj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *