Espaciado dentro de las grillas

Clase 9 de 21 • Curso de Foundation 2018

Resumen

Ya comprendiste la lógica de las grillas de Foundation, ahora aplica lo aprendido dándole forma a tu diseño creando espacios y padding en ellas.

Practica cómo aplicarlas con ejercicios específicos de grillas. Comparte tus resultados y desafíos, resuélvelos junto al resto de la comunidad.

Rafael Jair Sanchez Alviso

student•

Aquí dejo como lo realice yo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.0-rc.2/dist/css/foundation.min.css" integrity="sha256-iJQ8dZac/jUYHxiEnZJsyVpKcdq2sQvdA7t02QFmp30= sha384-SplqNBo/0ZlvSdwrP/riIPDozO5ck8+yIm++KVqyMAC53S6m3BaV+2OLpi7ULOOh sha512-ho6hK4sAWdCeqopNZWNy1d9Ok2hzfTLQLcGSr8ZlRzDzh6tNHkVoqSl6wgLsqls3yazwiG9H9dBCtSfPuiLRCQ==" crossorigin="anonymous">
  <title>Grid</title>
  <style>
      .grid-x, .grid-y{
        background: #2d3436;
      }
      div[class^="cell"]{
        background: #00cec9;
        height: 100px;
        min-width: 40px;
        border: 1px solid #6c5ce7;
      }
    </style>
</head>
<body>
    <div class="grid-container">
      <div class="grid-x grid-margin-x">
        <div class="cell auto">Columna 1</div>
        <div class="cell auto">Columna 2</div>
        <div class="cell auto">Columna 3</div>
        <div class="cell auto">Columna 4</div>
        <div class="cell auto">Columna 5</div>
        <div class="cell auto">columna 6</div>
      </div>
      <div class="grid-x grid-margin-x">
        <div class="cell auto">Columna 1</div>
        <div class="cell auto">Columna 2</div>
      </div>
      <div class="grid-x grid-margin-x">
        <div class="cell auto">Columna 1</div>
        <div class="cell auto">Columna 2</div>
        <div class="cell auto">Columna 3</div>
      </div>
      <div class="grid-x grid-margin-x">
        <div class="cell">Columna 1</div>
      </div>
      <div class="grid-x grid-margin-x">
        <div class="cell auto">1</div>
        <div class="cell auto">2</div>
        <div class="cell auto">3</div>
        <div class="cell auto">4</div>
        <div class="cell auto">5</div>
        <div class="cell auto">6</div>
        <div class="cell auto">7</div>
        <div class="cell auto">8</div>
        <div class="cell auto">9</div>
        <div class="cell auto">10</div>
        <div class="cell auto">11</div>
        <div class="cell auto">12</div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.0-rc.2/dist/js/foundation.min.js" integrity="sha256-G6jsRyH1fxbsvFIXSCuwYmI1aIDYBa28xscrvmYjJy0= sha384-vtoG68NvPc9azmFJr447vvY8qgdyA4FdaJ5/bqvzIM4eAdZfO0iyRRF8l2AAscYI sha512-43seCcNrHA0BQgrtyajB9sp8yOdv5c8QdYvgjP7zJ7v+dmzAcxYDQ2gupb9aztsNWBq1COIp/3NHYkQs4l/dkg==" crossorigin="anonymous"></script>
</body>
</html>

Segundo ejercicio

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.0-rc.2/dist/css/foundation.min.css" integrity="sha256-iJQ8dZac/jUYHxiEnZJsyVpKcdq2sQvdA7t02QFmp30= sha384-SplqNBo/0ZlvSdwrP/riIPDozO5ck8+yIm++KVqyMAC53S6m3BaV+2OLpi7ULOOh sha512-ho6hK4sAWdCeqopNZWNy1d9Ok2hzfTLQLcGSr8ZlRzDzh6tNHkVoqSl6wgLsqls3yazwiG9H9dBCtSfPuiLRCQ==" crossorigin="anonymous">
  <title>Grid</title>
  <style>
      .grid-x, .grid-y{
        background: #2d3436;
      }
      div[class^="cell"]{
        background: #00cec9;
        border: 1px solid #6c5ce7;
      }
    </style>
</head>
<body>
    <div class="grid-container">
		<div class="grid-y grid-margin-y" style="height: 400px;">
			<div class="cell small-6 medium-4 large-2">Columna 1</div>
			<div class="cell small-4 medium-4 large-4">Columna 2</div>
			<div class="cell small-2 medium-4 large-6">Columna 3</div>
		</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.0-rc.2/dist/js/foundation.min.js" integrity="sha256-G6jsRyH1fxbsvFIXSCuwYmI1aIDYBa28xscrvmYjJy0= sha384-vtoG68NvPc9azmFJr447vvY8qgdyA4FdaJ5/bqvzIM4eAdZfO0iyRRF8l2AAscYI sha512-43seCcNrHA0BQgrtyajB9sp8yOdv5c8QdYvgjP7zJ7v+dmzAcxYDQ2gupb9aztsNWBq1COIp/3NHYkQs4l/dkg==" crossorigin="anonymous"></script>
</body>
</html>

tercer ejercicio

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.0-rc.2/dist/css/foundation.min.css" integrity="sha256-iJQ8dZac/jUYHxiEnZJsyVpKcdq2sQvdA7t02QFmp30= sha384-SplqNBo/0ZlvSdwrP/riIPDozO5ck8+yIm++KVqyMAC53S6m3BaV+2OLpi7ULOOh sha512-ho6hK4sAWdCeqopNZWNy1d9Ok2hzfTLQLcGSr8ZlRzDzh6tNHkVoqSl6wgLsqls3yazwiG9H9dBCtSfPuiLRCQ==" crossorigin="anonymous">
  <title>Grid</title>
  <style>
      .grid-x, .grid-y{
        background: #2d3436;
      }
      div[class^="cell"]{
        background: #00cec9;
        height: 100px;
        min-width: 40px;
        border: 1px solid #6c5ce7;
      }
    </style>
</head>
<body>
	<div class="grid-container">
		<div class="grid-x grid-margin-x">
			<div class="cell medium-8 medium-offset-2 large-6 large-offset-6">Columna 1</div>
		</div>
	</div>

<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.0-rc.2/dist/js/foundation.min.js" integrity="sha256-G6jsRyH1fxbsvFIXSCuwYmI1aIDYBa28xscrvmYjJy0= sha384-vtoG68NvPc9azmFJr447vvY8qgdyA4FdaJ5/bqvzIM4eAdZfO0iyRRF8l2AAscYI sha512-43seCcNrHA0BQgrtyajB9sp8yOdv5c8QdYvgjP7zJ7v+dmzAcxYDQ2gupb9aztsNWBq1COIp/3NHYkQs4l/dkg==" crossorigin="anonymous"></script>
</body>
</html>

Danelia Sanchez Sanchez

student•

Ejercicio 1
Ejercicio 2
Ejercicio 3

Jose Angel Mejia Legorreta

company_admin•

Hola, como agrego la imagen de mis retos?

Alberto González

student•

¡Hola! Es muy sencillo, no te preocupes. Solo tienes que arrastrar y soltar tu imagen dentro del área de comentarios. Me comentas como te fue. Hasta pronto.

Christian Alvarenga

student•

++Reto 1++

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reto 1</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous">
  </head>
  <style>
    .grid-x {
      background: #ff7e4f;
    }
    div[class^="cell"] {
      background-color: #fe6247;
      height: 100px;
      color: white;
      border: 1px solid #ff8c33;
    }
  </style>
  <body>
    <div class="grid-container">
      <div class="grid-x grid-margin-x">
        <div class="cell auto">Columna 1</div>
        <div class="cell auto">Columna 2</div>
        <div class="cell auto">Columna 3</div>
        <div class="cell auto">Columna 4</div>
        <div class="cell auto">Columna 5</div>
        <div class="cell auto">Columna 6</div>
      </div>
      <div class="grid-x grid-margin-x">
        <div class="cell auto">Columna 1</div>
        <div class="cell auto">Columna 2</div>
      </div>
      <div class="grid-x grid-margin-x">
        <div class="cell auto">Columna 1</div>
        <div class="cell auto">Columna 2</div>
        <div class="cell auto">Columna 3</div>
      </div>
      <div class="grid-x grid-margin-x">
        <div class="cell">Columna 1</div>
      </div>
      <div class="grid-x grid-margin-x">
        <div class="cell auto">1</div>
        <div class="cell auto">2</div>
        <div class="cell auto">3</div>
        <div class="cell auto">4</div>
        <div class="cell auto">5</div>
        <div class="cell auto">6</div>
        <div class="cell auto">7</div>
        <div class="cell auto">8</div>
        <div class="cell auto">9</div>
        <div class="cell auto">10</div>
        <div class="cell auto">11</div>
        <div class="cell auto">12</div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js" integrity="sha256-pRF3zifJRA9jXGv++b06qwtSqX1byFQOLjqa2PTEb2o=" crossorigin="anonymous"></script>
  </body>
</html>

Reto 2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reto 2</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous">
    <style>
      .grid-y {
        background-color: #7bec9f;
        height: 400px;
      }
      div[class^="cell"]{
        background-color: #2fd474;
        border: 1px solid #34c16c;
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
		<div class="grid-y grid-margin-y grid-padding-y">
			<div class="cell small-6 medium-4 large-2">Columna 1</div>
			<div class="cell small-4 medium-4 large-4">Columna 2</div>
			<div class="cell small-2 medium-4 large-6">Columna 3</div>
		</div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js" integrity="sha256-pRF3zifJRA9jXGv++b06qwtSqX1byFQOLjqa2PTEb2o=" crossorigin="anonymous"></script>
  </body>
</html>

Reto 3

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reto 3</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous">
    <style>
      .grid-x {
        background-color: #709ffe;
      }
      div[class^="cell"] {
        background-color: #5251eb;
        color: white;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-x grid-margin-x">
        <div class="cell small-12 medium-8 medium-offset-2 large-6 large-offset-6">Columna 1</div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js" integrity="sha256-pRF3zifJRA9jXGv++b06qwtSqX1byFQOLjqa2PTEb2o=" crossorigin="anonymous"></script>
  </body>
</html>

Francisco Javier Molina Silva

student•

Desafio resuelto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous">
    <style>
        .grid-x, .grid-y{
            background-color: #a29bfe;
        }

        div[class^="cell"]{
            background-color: #74b9ff;
            border: 1px solid #00cec9;
            color: white;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="grid-container fluid">
        <div class="grid-x grid-margin-x grid-padding-x">
            <div class="cell small-2">columna 1</div>
            <div class="cell small-2">columna 2</div>
            <div class="cell small-2">columna 3</div>
            <div class="cell small-2">columna 4</div>
            <div class="cell small-2">columna 5</div>
            <div class="cell small-2">columna 6</div>
        </div>
        <div class="grid-x grid-margin-x grid-padding-x">
            <div class="cell small-6">Columna 1</div>
            <div class="cell small-6">Columna 2</div>
        </div>
        <div class="grid-x grid-margin-x grid-padding-x">
            <div class="cell small-4">Columna 1</div>
            <div class="cell small-4">Columna 2</div>
            <div class="cell small-4">Columna 3</div>
        </div>
        <div class="grid-x grid-margin-x grid-padding-x">
            <div class="cell auto">Columna 1</div>
        </div>    
        <div class="grid-x grid-margin-x grid-padding-x">  
            <div class="cell auto">1</div>
            <div class="cell auto">2</div>
            <div class="cell auto">3</div>
            <div class="cell auto">4</div>
            <div class="cell auto">5</div>
            <div class="cell auto">6</div>
            <div class="cell auto">7</div>
            <div class="cell auto">8</div>
            <div class="cell auto">9</div>
            <div class="cell auto">10</div>
            <div class="cell auto">11</div>
            <div class="cell auto">12</div>
        </div>   
        <br>
        <div class="grid-y grid-margin-y grid-padding-y" style="height: 400px;">
            <div class="cell small-6 medium-auto large-2">
                Columna 1
            </div>
            <div class="cell small-4 medium-auto large-4">
                Columna 2
            </div>
            <div class="cell small-2 medium-auto large-6">
                columna 3
            </div>
        </div>
        <br>
        <div class="grid-x grid-margin-x grid-padding-x">
            <div class="cell small-12 medium-8 large-6 small-offset-0 medium-offset-2 large-offset-6">Columna 1</div>
        </div>
    </div>
        <!-- Compressed JavaScript -->
        <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js" integrity="sha256-pRF3zifJRA9jXGv++b06qwtSqX1byFQOLjqa2PTEb2o=" crossorigin="anonymous"></script>
    </body>
    </html>

Miguel Angel Reyes Moreno

student•

Así los hice yo: Ejercicio 1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio 1</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous">
    <link rel="stylesheet" href="src/assets/fonts/foundation-icons/foundation-icons.css">
    <style>
        .grid-x, .grid-y{
            background-color: #ff5252;
        }

        div[class^="cell"]{
            background-color: #33d9b2;
            border: 1px solid black;
            color: white;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-x grid-margin-x">
            <div class="cell small-2">1</div>
            <div class="cell small-2">2</div>
            <div class="cell small-2">3</div>
            <div class="cell small-2">4</div>
            <div class="cell small-2">5</div>
            <div class="cell small-2">6</div>
        </div>

        <div class="grid-x grid-margin-x">
            <div class="cell small-6">1</div>
            <div class="cell small-6">2</div>
        </div>

        <div class="grid-x grid-margin-x">
            <div class="cell small-4">1</div>
            <div class="cell small-4">2</div>
            <div class="cell small-4">3</div>
        </div>

        <div class="grid-x grid-margin-x">
            <div class="cell">1</div>
        </div>

        <div class="grid-x grid-margin-x">
            <div class="cell small-1">1</div>
            <div class="cell small-1">2</div>
            <div class="cell small-1">3</div>
            <div class="cell small-1">4</div>
            <div class="cell small-1">5</div>
            <div class="cell small-1">6</div>
            <div class="cell small-1">7</div>
            <div class="cell small-1">8</div>
            <div class="cell small-1">9</div>
            <div class="cell small-1">10</div>
            <div class="cell small-1">11</div>
            <div class="cell small-1">12</div>
        </div>
    </div>

    <!-- Compressed JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js" integrity="sha256-pRF3zifJRA9jXGv++b06qwtSqX1byFQOLjqa2PTEb2o=" crossorigin="anonymous"></script>
</body>
</html>

Ejercicio 2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio 2</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous">
    <link rel="stylesheet" href="src/assets/fonts/foundation-icons/foundation-icons.css">

    <style>
        .grid-x, .grid-y{
            background-color: #218c74;
        }

        div[class^="cell"]{
            background-color: #33d9b2;
            border: 1px solid black;
            color: white;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-y grid-margin-y" style="height: 600px;">
            <div class="cell small-6 medium-4 large-2">1</div>
            <div class="cell small-4 medium-4 large-4">2</div>
            <div class="cell small-2 medium-4 large-6">3</div>
        </div>
    </div>

    <!-- Compressed JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js" integrity="sha256-pRF3zifJRA9jXGv++b06qwtSqX1byFQOLjqa2PTEb2o=" crossorigin="anonymous"></script>
</body>
</html>

Ejercicio 3:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio 3</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous">
    <link rel="stylesheet" href="src/assets/fonts/foundation-icons/foundation-icons.css">
    <style>
        .grid-x, .grid-y{
            background-color: #218c74;
        }

        div[class^="cell"]{
            background-color: #33d9b2;
            border: 1px solid black;
            color: white;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-x">
            <div class="cell small-12 medium-6 large-6 medium-offset-3 large-offset-6">Columna 1</div>
        </div>
    </div>

    <!-- Compressed JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js" integrity="sha256-pRF3zifJRA9jXGv++b06qwtSqX1byFQOLjqa2PTEb2o=" crossorigin="anonymous"></script>
</body>
</html>

Daniel Muñoz Martín

student•

Me encanta que manden retos ya que mucha gente carece de imaginación sobre los posibles casos prácticos de donde utilizar lo aprendido. Creo que practicando es la manera más eficaz de aprender, solamente viendo videos nunca aprenderás. como yo digo, peleandote con el código es cómo realmente aprenderás.

Aquí les dejo mi solución:

Desafío 1

<div class="grid-container">

    <div class="grid-x grid-margin-x grid-padding-x">
      <div class="cell auto">Columna 1</div>
      <div class="cell auto">Columna 2</div>
      <div class="cell auto">Columna 3</div>
      <div class="cell auto">Columna 4</div>
      <div class="cell auto">Columna 5</div>
      <div class="cell auto">Columna 6</div>
    </div>

    <div class="grid-x grid-margin-x grid-padding-x">
      <div class="cell auto">Columna 1</div>
      <div class="cell auto">Columna 2</div>
    </div>

    <div class="grid-x grid-margin-x grid-padding-x">
      <div class="cell auto">Columna 1</div>
      <div class="cell auto">Columna 2</div>
      <div class="cell auto">Columna 3</div>
    </div>

    <div class="grid-x grid-margin-x grid-padding-x">
      <div class="cell auto">Columna 1</div>
    </div>

    <div class="grid-x grid-margin-x grid-padding-x">
      <div class="cell auto">1</div>
      <div class="cell auto">2</div>
      <div class="cell auto">3</div>
      <div class="cell auto">4</div>
      <div class="cell auto">5</div>
      <div class="cell auto">6</div>
      <div class="cell auto">7</div>
      <div class="cell auto">8</div>
      <div class="cell auto">9</div>
      <div class="cell auto">10</div>
      <div class="cell auto">11</div>
      <div class="cell auto">12</div>
    </div>

  </div>

Desafío 2

<div class="grid-container">

    <div class="grid-y grid-margin-y" style="height: 90vh;">
      <div class="cell small-6 medium-4 large-2">Columna 1</div>
      <div class="cell small-4 medium-4 large-4">Columna 2</div>
      <div class="cell small-2 medium-4 large-6">Columna 3</div>
    </div>

  </div>

Desafío 3

<div class="grid-container">

    <div class="grid-x grid-margin-x grid-padding-x">
      <div class="cell small-12 medium-8 medium-offset-2 large-6 large-offset-6">Columna 1</div>
    </div>

  </div>

Isaias Chávez

student•

les dejo mi código, les parece? Cómo lo hicieron ustedes?
EJERCICIO1

  <div class="grid-container">
      <div class="grid-x grid-margin-x">
        <div class="cell auto"> Columna 1</div>
        <div class="cell auto"> Columna 2</div>
        <div class="cell auto"> Columna 3</div>
        <div class="cell auto"> Columna 4</div>
        <div class="cell auto"> Columna 5</div>
        <div class="cell auto"> Columna 6</div>
      </div>
      <!-- HILERA 2 -->
      <div class="grid-x grid-margin-x">
        <div class="cell auto"> Columna 1</div>
        <div class="cell auto"> Columna 2</div>
      </div>
      <!-- HILERA 3 -->
      <div class="grid-x grid-margin-x">
        <div class="cell auto"> Columna 1</div>
        <div class="cell auto"> Columna 2</div>
        <div class="cell auto"> Columna 3</div>
      </div>
      <!-- HILERA 4 -->
      <div class="grid-x grid-margin-x">
        <div class="cell auto"> Columna 1</div>
      </div>

      <!-- HILERA 5 -->
      <div class="grid-x grid-margin-x">
        <div class="cell auto"> Columna 1</div>
        <div class="cell auto"> Columna 2</div>
        <div class="cell auto"> Columna 3</div>
        <div class="cell auto"> Columna 4</div>
        <div class="cell auto"> Columna 5</div>
        <div class="cell auto"> Columna 6</div>
        <div class="cell auto"> Columna 7</div>
        <div class="cell auto"> Columna 8</div>
        <div class="cell auto"> Columna 9</div>
        <div class="cell auto"> Columna 10</div>
        <div class="cell auto"> Columna 11</div>
        <div class="cell auto"> Columna 12</div>
      </div>

    </div>

EJERCICIO 2

<body>
    <div class="grid-y grid-margin-y" style="height: 500px">
      <div class="cell small-6  medium-4 large-2"></div>
      <div class="cell small-4 medium-4 large-4"></div>
      <div class="cell small-2 medium-4 large-6"></div>

    </div>

EJERCICIO 4

<div class="grid-x grid-margin-x" >
      <div class="cell small-12  medium-8 medium-offset-2 large-offset-4"></div>
    </div>

Leonardo Grabow

student•

Estimados:
Faltan los archivos de práctica de las que se hablan al final del video…

Revisen antes de subir los cursos, en solo horas, encontré varios errores o faltantes.
Saludos
Leonardo Grabow

Diego Forero

Team Platzi•

Gracias por el reporte, subiremos los archivos lo más pronto posible.

Alejandra Riscanevo

student•

Hola! Revisamos el repo y efectivamente está ahí. Te dejo los branches -

😃 Cuéntame cómo te va!

Jorge Jorge Marrero

student•

Que interesante, esta este framework sobre todo la posibilidad de cambiar la dirección de la grilla

Harold David Avila Sabogal

student•

<<style>
  .Challenge-1 .cell{
    background: #3498db;
  }
  .Challenge-2 .cell{
    background: #1abc9c;
  }
  .Challenge-3 .cell{
    background: #9b59b6;
  }
  div[class^="cell"] {
    border: 1px solid black;
    color: white;
    height: 100px;
  }
  </style>>

ya en el body

<<!-- Challenge 1 -->
  <div class="grid-container ">
    <!-- Row 1 -->  
    <div class="grid-x grid-margin-x grid-padding-x Challenge-1">
      <div class="cell auto"> Column 1</div>
      <div class="cell auto"> Column 2</div>
      <div class="cell auto"> Column 3</div>
      <div class="cell auto"> Column 4</div>
      <div class="cell auto"> Column 5</div>
      <div class="cell auto"> Column 6</div>
    </div>
    <!-- Row 2 -->
    <div class="grid-x grid-margin-x grid-padding-x">
      <div class="cell auto"> Column 1</div>
      <div class="cell auto"> Column 2</div>
    </div>
    <!-- Row 3 -->
    <div class="grid-x grid-margin-x grid-padding-x">
      <div class="cell auto"> Column 1</div>
      <div class="cell auto"> Column 2</div>
      <div class="cell auto"> Column 3</div>
    </div>
    <!-- Row 4 -->
    <div class="grid-x grid-margin-x grid-padding-x">
      <div class="cell auto"> Column 1</div>
    </div>

    <!-- Row 5 -->
    <div class="grid-x grid-margin-x grid-padding-x">
      <div class="cell auto"> Column 1</div>
      <div class="cell auto"> Column 2</div>
      <div class="cell auto"> Column 3</div>
      <div class="cell auto"> Column 4</div>
      <div class="cell auto"> Column 5</div>
      <div class="cell auto"> Column 6</div>
      <div class="cell auto"> Column 7</div>
      <div class="cell auto"> Column 8</div>
      <div class="cell auto"> Column 9</div>
      <div class="cell auto"> Column 10</div>
      <div class="cell auto"> Column 11</div>
      <div class="cell auto"> Column 12</div>
    </div>
  </div>>

Harold David Avila Sabogal

student•

<<style>
  .Challenge-1 .cell{
    background: #3498db;
  }
  .Challenge-2 .cell{
    background: #1abc9c;
  }
  .Challenge-3 .cell{
    background: #9b59b6;
  }
  div[class^="cell"] {
    border: 1px solid black;
    color: white;
    height: 100px;
  }
  </style>>

Ya en el body

<<!-- Challenge 2 -->
  <div class="grid-container ">
    <!-- Column 1 --> 
    <div class="grid-y grid-margin-y grid-padding-y Challenge-2" style="height: 90vh;">
      <div class="cell small-6 medium-4 large-2">Column 1</div>
      <div class="cell small-4 medium-4 large-4">Column 2</div>
      <div class="cell small-2 medium-4 large-6">Column 3</div>
    </div>
  </div>>

Harold David Avila Sabogal

student•

<<style>
  .Challenge-1 .cell{
    background: #3498db;
  }
  .Challenge-2 .cell{
    background: #1abc9c;
  }
  .Challenge-3 .cell{
    background: #9b59b6;
  }
  div[class^="cell"] {
    border: 1px solid black;
    color: white;
    height: 100px;
  }
  </style>>

Ya en el body

<<!-- Challenge 3 -->
  <div class="grid-container ">
    <!-- Row 1 --> 
    <div class="grid-x grid-margin-x grid-padding-x Challenge-3">
      <div class="cell small-12 medium-8 medium-offset-2 large-6 large-offset-6">Column 1</div>
    </div>
  </div>>

David Behar

student•

Reto 1:

https://behagoras.github.io/foundation-standalone-exercises/reto-1

. Código: https://github.com/behagoras/foundation-standalone-exercises/blob/master/docs/reto-1.html

Reto 2:

https://behagoras.github.io/foundation-standalone-exercises/reto-2 . Código: https://github.com/behagoras/foundation-standalone-exercises/blob/master/docs/reto-2.html .

&lt;div class=&quot;grid-y grid-margin-y grid-padding-y grid-padding-x&quot; style=&quot;height: 400px;&quot;&gt;
  &lt;div class=&quot;cell large-2 medium-auto small-6&quot;&gt;Columna 1&lt;/div&gt;
  &lt;div class=&quot;cell large-4 medium-auto small-4&quot;&gt;Columna 2&lt;/div&gt;
  &lt;div class=&quot;cell large-6 medium-auto small-2&quot;&gt;Columna 3&lt;/div&gt;
&lt;/div&gt;

Reto 3

https://behagoras.github.io/foundation-standalone-exercises/reto-3

. Código: https://github.com/behagoras/foundation-standalone-exercises/blob/master/docs/reto-3.html .

&lt;div class=&quot;grid-x grid-padding-x&quot;&gt;
  &lt;div class=&quot;cell small-auto medium-8 medium-offset-2 large-6 large-offset-6&quot;&gt;Columna 1&lt;/div&gt;
&lt;/div&gt;

Daniel Valderrama Mendoza

student•

Listo!!!

<!-- RETO#1 -->
  <div class="grid-container">
    <div class="grid-x grid-margin-x grid-padding-x">
      <div class="cell auto">Columna 1</div>
      <div class="cell auto">Columna 2</div>
      <div class="cell auto">Columna 3</div>
      <div class="cell auto">Columna 4</div>
      <div class="cell auto">Columna 5</div>
      <div class="cell auto">Columna 6</div>
    </div>
    <div class="grid-x grid-margin-x grid-padding-x">
      <div class="cell auto">Columna 1</div>
      <div class="cell auto">Columna 2</div>
    </div>
    <div class="grid-x grid-margin-x grid-padding-x">
      <div class="cell auto">Columna 1</div>
      <div class="cell auto">Columna 2</div>
      <div class="cell auto">Columna 3</div>
    </div>
    <div class="grid-x grid-margin-x grid-padding-x">
      <div class="cell auto">Columna 1</div>
    </div>
    <div class="grid-x grid-margin-x grid-padding-x">
      <div class="cell auto">1</div>
      <div class="cell auto">2</div>
      <div class="cell auto">3</div>
      <div class="cell auto">4</div>
      <div class="cell auto">5</div>
      <div class="cell auto">6</div>
      <div class="cell auto">7</div>
      <div class="cell auto">8</div>
      <div class="cell auto">9</div>
      <div class="cell auto">10</div>
      <div class="cell auto">11</div>
      <div class="cell auto">12</div>
    </div>
  </div> 
  <!-- RETO# 2 -->
  <div class="grid-container">
    <div class="grid-y grid-margin-y grid-padding-y" style="height: 500px;">
      <div class="cell small-6 medium-auto large-2">Columna 1</div>
      <div class="cell small-4 medium-auto large-4">Columan 2</div>
      <div class="cell small-2 medium-auto large-6">Columna 3</div>
    </div>
  </div>
  <!-- RETO #3 -->
  <div class="grid-container">
    <div class="grid-x grid-margin-x grid-padding-x">
      <div style="height: 100px;" class="cell small-auto medium-8 medium-offset-2 large-6 large-offset-6">Columna 1</div>
    </div>
  </div>```

Antonio Gonzales Moquillaza

student•

Reto 1

<div class="grid-container"> <h1>Grilla Foundation</h1> <div class="grid-x grid-margin-x"> <div class="auto cell">Columna 1</div> <div class="auto cell">Columna 2</div> <div class="auto cell">Columna 3</div> <div class="auto cell">Columna 4</div> <div class="auto cell">Columna 5</div> <div class="auto cell">Columna 6</div> </div>

<div class="grid-x grid-margin-x">
    <div class="auto cell">Columna 1</div>
    <div class="auto cell">Columna 2</div>
</div>

<div class="grid-x grid-margin-x">
        <div class="auto cell">Columna 1</div>
        <div class="auto cell">Columna 2</div>
        <div class="auto cell">Columna 3</div>
</div>

<div class="grid-x grid-margin-x">
    <div class="auto cell">Columna 1</div>
</div>

<div class="grid-x grid-margin-x">
    <div class="auto cell">Columna 1</div>
    <div class="auto cell">Columna 2</div>
    <div class="auto cell">Columna 3</div>
    <div class="auto cell">Columna 4</div>
    <div class="auto cell">Columna 5</div>
    <div class="auto cell">Columna 6</div>
    <div class="auto cell">Columna 7</div>
    <div class="auto cell">Columna 8</div>
    <div class="auto cell">Columna 9</div>
    <div class="auto cell">Columna 10</div>
    <div class="auto cell">Columna 11</div>
    <div class="auto cell">Columna 12</div>
</div>

</div>

Reto 2

<div class="grid-container"> <div class="grid-y grid-margin-y"> <div class="small-6 medium-4 large-2 cell">Columna 1</div> <div class="small-4 medium-4 large-4 cell">Columna 2</div> <div class="small-2 medium-4 Large-6 cell">Columna 3</div> </div> </div>

Reto 3

<div class="grid-container"> <div class="grid-x grid-margin-x"> <div class="small-12 medium-8 medium-offset-2 large-6 large-offset-6 cell">Columna 1</div> </div> </div>

Edward Fabian Martinez Aparicio

student•

Reto 1

<div class="grid-container">
        <div class="grid-x grid-margin-x grid-padding-x">
            <div class="cell auto">columna 1</div>
            <div class="cell auto">columna 2</div>
            <div class="cell auto">columna 3</div>
            <div class="cell auto">columna 4</div>
            <div class="cell auto">columna 5</div>
            <div class="cell auto">columna 6</div>
        </div>

        <div class="grid-x grid-margin-x grid-padding-x">
            <div class="cell auto">columna 1</div>
            <div class="cell auto">columna 2</div>
        </div>
        <div class="grid-x grid-margin-x grid-padding-x">
            <div class="cell auto">columna 1</div>
            <div class="cell auto">columna 2</div>
            <div class="cell auto">columna 3</div>
        </div>
        <div class="grid-x grid-margin-x grid-padding-x">
            <div class="cell auto">columna 1</div>
        </div>
        <div class="grid-x grid-margin-x grid-padding-x">
            <div class="cell auto">1</div>
            <div class="cell auto">2</div>
            <div class="cell auto">3</div>
            <div class="cell auto">4</div>
            <div class="cell auto">5</div>
            <div class="cell auto">6</div>
            <div class="cell auto">7</div>
            <div class="cell auto">8</div>
            <div class="cell auto">9</div>
            <div class="cell auto">10</div>
            <div class="cell auto">11</div>
            <div class="cell auto">12</div>
        </div>

Reto 2

 <div class="grid-container">
        <div class="grid-y grid-margin-y" style="height:400px;">
            <div class="cell small-6 medium-4 large-2">Columna 1</div>
            <div class="cell small-4 medium-4 large-4">Columna 2</div>
            <div class="cell small-2 medium-4 large-6">Columna 3</div>
       </div>

Reto 3

 <div class="grid-x grid-margin-x">
        <div class="cell small-12 medium-8 medium-offset-2 large-6 large-offset-6">Columna 1</div>

    </div>

María Sierra

student•

Reto 1

Reto 2

Large
Medium
Small

Reto 3

Large
Medium
Small

Juan Esteban García Giraldo

student•

Manuel Durán

student•

aqui ta la tarea profe:

https://codepen.io/durbonca/pen/ExxXGBy

Espaciado dentro de las grillas

Introducción

¿Dónde aprender frontend actualizado?

Introducción a Foundation y al proyecto del curso

Repositorio del curso

¿Que es un framework frontend?

Creando el sitio web

Instalación de Foundation

Configuración de Foundation

Incorporando los iconos de Foundation

La nueva grilla XY de Foundation

Espaciado dentro de las grillas

Creando nuestro header

Creando el menú de navegación

Adaptando el menú de navegación para dispositivos móviles

Agregando un carrusel de imágenes con Orbit

Agregando una barra lateral de navegación

Agregando el listado de productos

Agregando un menú lateral off-canvas

Agregar Smooth Navigation

Llevando nuestro sitio a producción

Complementos- Creando emails para nuestros usuarios

Introducción a Foundation para Emails

Creando un email de recibo de compra

Conclusiones del curso