Scribd Logo
Upload

Welcome to Scribd!

  • WWW

    Uploaded by

    Juan Angel
    3 views1 page
    This document defines CSS styles to create a responsive grid layout for boxes using flexbox. The boxes are 100% width on mobile but change to 50% width on tablets and 33.33% width on desktops using media queries, allowing the number of boxes per row to adjust based on screen size.

    Original Description:

    Original Title

    Www

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document defines CSS styles to create a responsive grid layout for boxes using flexbox. The boxes are 100% width on mobile but change to 50% width on tablets and 33.33% width on desktops using media queries, allowing the number of boxes per row to adjust based on screen size.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    3 views1 page

    WWW

    Uploaded by

    Juan Angel
    This document defines CSS styles to create a responsive grid layout for boxes using flexbox. The boxes are 100% width on mobile but change to 50% width on tablets and 33.33% width on desktops using media queries, allowing the number of boxes per row to adjust based on screen size.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 1

    <!

    DOCTYPE html>
    <html>
    <head>
    <style>
    .container {
    display: flex;
    flex-wrap: wrap;
    }

    .box {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #f0f0f0;
    margin-bottom: 20px;
    }

    @media (min-width: 768px) {


    .box {
    width: 50%;
    }
    }

    @media (min-width: 1024px) {


    .box {
    width: 33.33%;
    }
    }
    </style>
    </head>
    <body>
    <div class="container">
    <div class="box">Caja 1</div>
    <div class="box">Caja 2</div>
    <div class="box">Caja 3</div>
    <div class="box">Caja 4</div>
    <div class="box">Caja 5</div>
    <div class="box">Caja 6</div>
    </div>
    </body>
    </html>

    You might also like