Skip to main content
Se agrega snnipet para visualizar el resultado en la respuesta.
Origen Enlace
DjCrazy
  • 7.1k
  • 3
  • 18
  • 42

He modificado el CSSCSS para que en función de una resolución u otra, cambie la perspectiva. He pasado de fila de 3 a fila de 2 y, cuando ya llega a un mínimo, pasa a fila de 1.

body {
    font-family: Verdana;
    background-size: 100px 80px;
}

/* Redimensión */

* {
    box-sizing: border-box;
}
#menu {
    float:left;
    width:100%;
    text-align:center;
}
#menu a {
    background-color:#e5e5e5;
    padding:8px;
    margin-top:7px;
    display:block;
    width:100%;
    color:black;
}
#portada {
    float:left;
    width:100%;
    padding:0 20px;
}
#contenido {
    background-color:#e5e5e5;
    float:left;
    width:100%;
    padding:15px;
    margin-top:7px;
    text-align:center;
}


/* Estructura flex */

.flex-container {
    display: flex;
    align-items: stretch;
    background-color: Gray;
}

.flex-container > div {
    background-color: LightYellow;
    color: black;
    width: 100px;
    margin: 5px;
    text-align: center;
    line-height: 30px;
    font-size: 15px;
}

/* Nav bar */

ul {
    list-style-type: none;
    margin: 5px;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

/* Galería de imágenes */

div.gallery {
    border: 1px solid #ccc;
    width: 150px; height: 150px;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 5px;
    text-align: center;
    font-size: 12px;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 31%;
}

@media only screen and (max-width: 720px) {
    .responsive {
        width: 30%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 719px) {
    .responsive {
        width: 50%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px) {
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <!-- Header -->
    <div class="flex-container" id="portada">
        <div style="flex-grow: 10">
            <img src="data:image/jpeg;base64,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"
            width="100%", height="200px;">
        </div>
    </div>

    <!-- Nav bar -->
    <ul id="menu">
        <li><a class="active" href="inicio.html">Inicio</a></li>
        <li><a href="gato.html">Gato1</a></li>
        <li><a href="gato.html">Gato2</a></li>
        <li><a href="gato.html">Gato3</a></li>
    </ul>

    <!-- Contenido -->
    <div class="flex-container" id="contenido">
        <div style="flex-grow: 1">Gato</div>
        <div style="flex-grow: 9">
            <div class="responsive">
                <div class="gallery">
                    <a target="_blank" href="gato.jpg">
                    <img src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg" alt="Gato1" width="300" height="200">
                    </a>
                    <div class="desc">Hola soy un gato</div>
                </div>
            </div>
            <div class="responsive">
                <div class="gallery">
                    <a target="_blank" href="gato2.jpg">
                        <img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2" width="300" height="200">
                    </a>
                    <div class="desc">Hola soy un gato</div>
                </div>
            </div>
            <div class="responsive">
                <div class="gallery">
                    <a target="_blank" href="gato3.jpg">
                        <img src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="Gato3" width="300" height="200">
                    </a>
                    <div class="desc">Y otro gato</div>
                </div>
            </div>
            <div class="responsive">
                <div class="gallery">
                    <a target="_blank" href="gato3.jpg">
                        <img src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="Gato3" width="300" height="200">
                    </a>
                    <div class="desc">Y otro gato</div>
                </div>
            </div>
            <div class="responsive">
                <div class="gallery">
                    <a target="_blank" href="gato2.jpg">
                        <img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2" width="300" height="200">
                    </a>
                    <div class="desc">Hola soy otro gato</div>
                </div>
            </div>
            <div class="responsive">
                <div class="gallery">
                    <a target="_blank" href="gato.jpg">
                        <img src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg" alt="Gato1" width="300" height="200">
                    </a>
                    <div class="desc">Hola soy un gato</div>
                </div>
            </div>  
            <div class="clearfix"></div>
        </div>
    </div>
</body>

body {
    font-family: Verdana;
    background-size: 100px 80px;
}

/* Redimensión */

* {
    box-sizing: border-box;
}
#menu {
    float:left;
    width:100%;
    text-align:center;
}
#menu a {
    background-color:#e5e5e5;
    padding:8px;
    margin-top:7px;
    display:block;
    width:100%;
    color:black;
}
#portada {
    float:left;
    width:100%;
    padding:0 20px;
}
#contenido {
    background-color:#e5e5e5;
    float:left;
    width:100%;
    padding:15px;
    margin-top:7px;
    text-align:center;
}


/* Estructura flex */

.flex-container {
    display: flex;
    align-items: stretch;
    background-color: Gray;
}

.flex-container > div {
    background-color: LightYellow;
    color: black;
    width: 100px;
    margin: 5px;
    text-align: center;
    line-height: 30px;
    font-size: 15px;
}

/* Nav bar */

ul {
    list-style-type: none;
    margin: 5px;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

/* Galería de imágenes */

div.gallery {
    border: 1px solid #ccc;
    width: 150px; height: 150px;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 5px;
    text-align: center;
    font-size: 12px;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 31%;
}

@media only screen and (max-width: 720px) {
    .responsive {
        width: 30%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 719px) {
    .responsive {
        width: 50%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px) {
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <!-- Header -->
        <div class="flex-container" id="portada">
            <div style="flex-grow: 10">
                <img src="data:image/jpeg;base64,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"
                width="100%", height="200px;">
            </div>
        </div>

        <!-- Nav bar -->
        <ul id="menu">
            <li><a class="active" href="inicio.html">Inicio</a></li>
            <li><a href="gato.html">Gato1</a></li>
            <li><a href="gato.html">Gato2</a></li>
            <li><a href="gato.html">Gato3</a></li>
        </ul>

        <!-- Contenido -->
        <div class="flex-container" id="contenido">
            <div style="flex-grow: 1">Gato</div>
            <div style="flex-grow: 9">
                <div class="responsive">
                    <div class="gallery">
                        <a target="_blank" href="gato.jpg">
                        <img src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg" alt="Gato1" width="300" height="200">
                        </a>
                        <div class="desc">Hola soy un gato</div>
                    </div>
                </div>
                <div class="responsive">
                    <div class="gallery">
                        <a target="_blank" href="gato2.jpg">
                            <img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2" width="300" height="200">
                        </a>
                        <div class="desc">Hola soy un gato</div>
                    </div>
                </div>
                <div class="responsive">
                    <div class="gallery">
                        <a target="_blank" href="gato3.jpg">
                            <img src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="Gato3" width="300" height="200">
                        </a>
                        <div class="desc">Y otro gato</div>
                    </div>
                </div>
                <div class="responsive">
                    <div class="gallery">
                        <a target="_blank" href="gato3.jpg">
                            <img src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="Gato3" width="300" height="200">
                        </a>
                        <div class="desc">Y otro gato</div>
                    </div>
                </div>
                <div class="responsive">
                    <div class="gallery">
                        <a target="_blank" href="gato2.jpg">
                            <img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2" width="300" height="200">
                        </a>
                        <div class="desc">Hola soy otro gato</div>
                    </div>
                </div>
                <div class="responsive">
                    <div class="gallery">
                        <a target="_blank" href="gato.jpg">
                            <img src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg" alt="Gato1" width="300" height="200">
                        </a>
                        <div class="desc">Hola soy un gato</div>
                    </div>
                </div>  
                <div class="clearfix"></div>
            </div>
        </div>
    </body>
</html>

He modificado el CSS para que en función de una resolución u otra, cambie la perspectiva. He pasado de fila de 3 a fila de 2 y, cuando ya llega a un mínimo, pasa a fila de 1.

body {
    font-family: Verdana;
    background-size: 100px 80px;
}

/* Redimensión */

* {
    box-sizing: border-box;
}
#menu {
    float:left;
    width:100%;
    text-align:center;
}
#menu a {
    background-color:#e5e5e5;
    padding:8px;
    margin-top:7px;
    display:block;
    width:100%;
    color:black;
}
#portada {
    float:left;
    width:100%;
    padding:0 20px;
}
#contenido {
    background-color:#e5e5e5;
    float:left;
    width:100%;
    padding:15px;
    margin-top:7px;
    text-align:center;
}


/* Estructura flex */

.flex-container {
    display: flex;
    align-items: stretch;
    background-color: Gray;
}

.flex-container > div {
    background-color: LightYellow;
    color: black;
    width: 100px;
    margin: 5px;
    text-align: center;
    line-height: 30px;
    font-size: 15px;
}

/* Nav bar */

ul {
    list-style-type: none;
    margin: 5px;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

/* Galería de imágenes */

div.gallery {
    border: 1px solid #ccc;
    width: 150px; height: 150px;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 5px;
    text-align: center;
    font-size: 12px;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 31%;
}

@media only screen and (max-width: 720px) {
    .responsive {
        width: 30%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 719px) {
    .responsive {
        width: 50%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px) {
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <!-- Header -->
    <div class="flex-container" id="portada">
        <div style="flex-grow: 10">
            <img src="data:image/jpeg;base64,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"
            width="100%", height="200px;">
        </div>
    </div>

    <!-- Nav bar -->
    <ul id="menu">
        <li><a class="active" href="inicio.html">Inicio</a></li>
        <li><a href="gato.html">Gato1</a></li>
        <li><a href="gato.html">Gato2</a></li>
        <li><a href="gato.html">Gato3</a></li>
    </ul>

    <!-- Contenido -->
    <div class="flex-container" id="contenido">
        <div style="flex-grow: 1">Gato</div>
        <div style="flex-grow: 9">
            <div class="responsive">
                <div class="gallery">
                    <a target="_blank" href="gato.jpg">
                    <img src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg" alt="Gato1" width="300" height="200">
                    </a>
                    <div class="desc">Hola soy un gato</div>
                </div>
            </div>
            <div class="responsive">
                <div class="gallery">
                    <a target="_blank" href="gato2.jpg">
                        <img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2" width="300" height="200">
                    </a>
                    <div class="desc">Hola soy un gato</div>
                </div>
            </div>
            <div class="responsive">
                <div class="gallery">
                    <a target="_blank" href="gato3.jpg">
                        <img src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="Gato3" width="300" height="200">
                    </a>
                    <div class="desc">Y otro gato</div>
                </div>
            </div>
            <div class="responsive">
                <div class="gallery">
                    <a target="_blank" href="gato3.jpg">
                        <img src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="Gato3" width="300" height="200">
                    </a>
                    <div class="desc">Y otro gato</div>
                </div>
            </div>
            <div class="responsive">
                <div class="gallery">
                    <a target="_blank" href="gato2.jpg">
                        <img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2" width="300" height="200">
                    </a>
                    <div class="desc">Hola soy otro gato</div>
                </div>
            </div>
            <div class="responsive">
                <div class="gallery">
                    <a target="_blank" href="gato.jpg">
                        <img src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg" alt="Gato1" width="300" height="200">
                    </a>
                    <div class="desc">Hola soy un gato</div>
                </div>
            </div>  
            <div class="clearfix"></div>
        </div>
    </div>
</body>

He modificado el CSS para que en función de una resolución u otra, cambie la perspectiva. He pasado de fila de 3 a fila de 2 y, cuando ya llega a un mínimo, pasa a fila de 1.

body {
    font-family: Verdana;
    background-size: 100px 80px;
}

/* Redimensión */

* {
    box-sizing: border-box;
}
#menu {
    float:left;
    width:100%;
    text-align:center;
}
#menu a {
    background-color:#e5e5e5;
    padding:8px;
    margin-top:7px;
    display:block;
    width:100%;
    color:black;
}
#portada {
    float:left;
    width:100%;
    padding:0 20px;
}
#contenido {
    background-color:#e5e5e5;
    float:left;
    width:100%;
    padding:15px;
    margin-top:7px;
    text-align:center;
}


/* Estructura flex */

.flex-container {
    display: flex;
    align-items: stretch;
    background-color: Gray;
}

.flex-container > div {
    background-color: LightYellow;
    color: black;
    width: 100px;
    margin: 5px;
    text-align: center;
    line-height: 30px;
    font-size: 15px;
}

/* Nav bar */

ul {
    list-style-type: none;
    margin: 5px;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

/* Galería de imágenes */

div.gallery {
    border: 1px solid #ccc;
    width: 150px; height: 150px;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 5px;
    text-align: center;
    font-size: 12px;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 31%;
}

@media only screen and (max-width: 720px) {
    .responsive {
        width: 30%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 719px) {
    .responsive {
        width: 50%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px) {
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <!-- Header -->
        <div class="flex-container" id="portada">
            <div style="flex-grow: 10">
                <img src="data:image/jpeg;base64,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"
                width="100%", height="200px;">
            </div>
        </div>

        <!-- Nav bar -->
        <ul id="menu">
            <li><a class="active" href="inicio.html">Inicio</a></li>
            <li><a href="gato.html">Gato1</a></li>
            <li><a href="gato.html">Gato2</a></li>
            <li><a href="gato.html">Gato3</a></li>
        </ul>

        <!-- Contenido -->
        <div class="flex-container" id="contenido">
            <div style="flex-grow: 1">Gato</div>
            <div style="flex-grow: 9">
                <div class="responsive">
                    <div class="gallery">
                        <a target="_blank" href="gato.jpg">
                        <img src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg" alt="Gato1" width="300" height="200">
                        </a>
                        <div class="desc">Hola soy un gato</div>
                    </div>
                </div>
                <div class="responsive">
                    <div class="gallery">
                        <a target="_blank" href="gato2.jpg">
                            <img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2" width="300" height="200">
                        </a>
                        <div class="desc">Hola soy un gato</div>
                    </div>
                </div>
                <div class="responsive">
                    <div class="gallery">
                        <a target="_blank" href="gato3.jpg">
                            <img src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="Gato3" width="300" height="200">
                        </a>
                        <div class="desc">Y otro gato</div>
                    </div>
                </div>
                <div class="responsive">
                    <div class="gallery">
                        <a target="_blank" href="gato3.jpg">
                            <img src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="Gato3" width="300" height="200">
                        </a>
                        <div class="desc">Y otro gato</div>
                    </div>
                </div>
                <div class="responsive">
                    <div class="gallery">
                        <a target="_blank" href="gato2.jpg">
                            <img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2" width="300" height="200">
                        </a>
                        <div class="desc">Hola soy otro gato</div>
                    </div>
                </div>
                <div class="responsive">
                    <div class="gallery">
                        <a target="_blank" href="gato.jpg">
                            <img src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg" alt="Gato1" width="300" height="200">
                        </a>
                        <div class="desc">Hola soy un gato</div>
                    </div>
                </div>  
                <div class="clearfix"></div>
            </div>
        </div>
    </body>
</html>

Origen Enlace
Ferran Muñoz
  • 1.3k
  • 6
  • 14

He modificado el CSS para que en función de una resolución u otra, cambie la perspectiva. He pasado de fila de 3 a fila de 2 y, cuando ya llega a un mínimo, pasa a fila de 1.

Además, he indentado el código para que sea más legible de cara otros compañeros.

body {
    font-family: Verdana;
    background-size: 100px 80px;
}

/* Redimensión */

* {
    box-sizing: border-box;
}
#menu {
    float:left;
    width:100%;
    text-align:center;
}
#menu a {
    background-color:#e5e5e5;
    padding:8px;
    margin-top:7px;
    display:block;
    width:100%;
    color:black;
}
#portada {
    float:left;
    width:100%;
    padding:0 20px;
}
#contenido {
    background-color:#e5e5e5;
    float:left;
    width:100%;
    padding:15px;
    margin-top:7px;
    text-align:center;
}


/* Estructura flex */

.flex-container {
    display: flex;
    align-items: stretch;
    background-color: Gray;
}

.flex-container > div {
    background-color: LightYellow;
    color: black;
    width: 100px;
    margin: 5px;
    text-align: center;
    line-height: 30px;
    font-size: 15px;
}

/* Nav bar */

ul {
    list-style-type: none;
    margin: 5px;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

/* Galería de imágenes */

div.gallery {
    border: 1px solid #ccc;
    width: 150px; height: 150px;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 5px;
    text-align: center;
    font-size: 12px;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 31%;
}

@media only screen and (max-width: 720px) {
    .responsive {
        width: 30%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 719px) {
    .responsive {
        width: 50%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px) {
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <!-- Header -->
    <div class="flex-container" id="portada">
        <div style="flex-grow: 10">
            <img src="data:image/jpeg;base64,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"
            width="100%", height="200px;">
        </div>
    </div>

    <!-- Nav bar -->
    <ul id="menu">
        <li><a class="active" href="inicio.html">Inicio</a></li>
        <li><a href="gato.html">Gato1</a></li>
        <li><a href="gato.html">Gato2</a></li>
        <li><a href="gato.html">Gato3</a></li>
    </ul>

    <!-- Contenido -->
    <div class="flex-container" id="contenido">
        <div style="flex-grow: 1">Gato</div>
        <div style="flex-grow: 9">
            <div class="responsive">
                <div class="gallery">
                    <a target="_blank" href="gato.jpg">
                    <img src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg" alt="Gato1" width="300" height="200">
                    </a>
                    <div class="desc">Hola soy un gato</div>
                </div>
            </div>
            <div class="responsive">
                <div class="gallery">
                    <a target="_blank" href="gato2.jpg">
                        <img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2" width="300" height="200">
                    </a>
                    <div class="desc">Hola soy un gato</div>
                </div>
            </div>
            <div class="responsive">
                <div class="gallery">
                    <a target="_blank" href="gato3.jpg">
                        <img src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="Gato3" width="300" height="200">
                    </a>
                    <div class="desc">Y otro gato</div>
                </div>
            </div>
            <div class="responsive">
                <div class="gallery">
                    <a target="_blank" href="gato3.jpg">
                        <img src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="Gato3" width="300" height="200">
                    </a>
                    <div class="desc">Y otro gato</div>
                </div>
            </div>
            <div class="responsive">
                <div class="gallery">
                    <a target="_blank" href="gato2.jpg">
                        <img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2" width="300" height="200">
                    </a>
                    <div class="desc">Hola soy otro gato</div>
                </div>
            </div>
            <div class="responsive">
                <div class="gallery">
                    <a target="_blank" href="gato.jpg">
                        <img src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg" alt="Gato1" width="300" height="200">
                    </a>
                    <div class="desc">Hola soy un gato</div>
                </div>
            </div>  
            <div class="clearfix"></div>
        </div>
    </div>
</body>

Espero que te sirva.

Saludos,