text:
---
id: 5a9036d038fddaf9a66b5d32
title: Add Columns with grid-template-columns
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/c7NzDHv'
---

## Description

Simply creating a grid element doesn't get you very far. You need to define the structure of the grid as well. To add some columns to the grid, use the grid-template-columns property on a grid container as demonstrated below:

.container {
  display: grid;
  grid-template-columns: 50px 50px;
}

This will give your grid two columns that are 50px wide each.
The number of parameters given to the grid-template-columns property indicates the number of columns in the grid, and the value of each parameter indicates the width of each column.

## Instructions

Give the grid container three columns that are 100px wide each.

## Tests

```yml
tests:
  - text: <code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.
    testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?100px\s*?100px\s*?100px\s*?;[\s\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.');

```

## Challenge Seed

```html
<style>
  .d1{background:LightSkyBlue;}
  .d2{background:LightSalmon;}
  .d3{background:PaleTurquoise;}
  .d4{background:LightPink;}
  .d5{background:PaleGreen;}

  .container {
    font-size: 40px;
    width: 100%;
    background: LightGray;
    display: grid;
    /* add your code below this line */

    /* add your code above this line */
  }
</style>

<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
  <div class="d5">5</div>
</div>
```

## Solution

```js
var code = ".container {grid-template-columns: 100px 100px 100px;}"
```


text:
#ifndef INTERNAL_H_
#define INTERNAL_H_

#if defined (_WIN32) && !defined (__CYGWIN__)
# include <windows.h>

# if defined (MINGW_DEFINE_OFF_T) && (defined (__MINGW32__) || defined (__MINGW64__))
#  include "off_t.h"

#  if !defined (__MINGW64__)
#   define off_t     cr_off32
#  else
#   define off_t     cr_off64
#  endif
#  define off64_t    cr_off64
# endif
# include <io.h>
# if defined (MINGW_DEFINE_OFF_T) && (defined (__MINGW32__) || defined (__MINGW64__))
#  undef off_t
#  undef off64_t
# endif
# include <fcntl.h>
# include <winnt.h>
# include <stdint.h>
# include <signal.h>
#else
# include <fcntl.h>
# include <signal.h>
# include <sys/param.h>
# include <sys/wait.h>
# include <unistd.h>
# ifdef BSD
#  include <sys/types.h>
typedef unsigned long u_long;
typedef unsigned int u_int;
typedef unsigned short u_short;
typedef unsigned char u_char;
#  include <sys/sysctl.h>
# endif
#endif

#include "posix.h"

#endif /* !INTERNAL_H_ */

redpajama_set_name: RedPajamaGithub


text:
namespace crashpad {

//! \brief Writes a variable-length byte array for a minidump into a
//!     \sa MinidumpByteArray.
class MinidumpByteArrayWriter final : public internal::MinidumpWritable {
 public:
  MinidumpByteArrayWriter();
  ~MinidumpByteArrayWriter() override;

  //! \brief Sets the data to be written.
  //!
  //! \note Valid in #kStateMutable.
  void set_data(const std::vector<uint8_t>& data) { data_ = data; }

  //! \brief Sets the data to be written.
  //!
  //! \note Valid in #kStateMutable.
  void set_data(const uint8_t* data, size_t size);

  //! \brief Gets the data to be written.
  //!
  //! \note Valid in any state.
  const std::vector<uint8_t>& data() const { return data_; }

 protected:
  // MinidumpWritable:

  bool Freeze() override;
  size_t SizeOfObject() override;
  bool WriteObject(FileWriterInterface* file_writer) override;

 private:
  std::unique_ptr<MinidumpByteArray> minidump_array_;
  std::vector<uint8_t> data_;

  DISALLOW_COPY_AND_ASSIGN(MinidumpByteArrayWriter);
};

}  // namespace crashpad

#endif  // CRASHPAD_MINIDUMP_MINIDUMP_BYTE_ARRAY_WRITER_H_


text:
'use strict';

exports.__esModule = true;
exports['default'] = find;

var _findSupport = require('./find-support');

function find(predicate, thisArg) {
    return this.lift(new _findSupport.FindValueOperator(predicate, this, false, thisArg));
}

//# sourceMappingURL=find.js.map
module.exports = exports['default'];
//# sourceMappingURL=find.js.map


text:
layout: video
title:  "Areta in utero"
teaser:

categories:
    - works
tags:
    - content
    - post
    - video

iframe: <iframe src="https://player.vimeo.com/video/93275523" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

header: no
image:
    title: areta.jpg
    thumb: osaka_eki.jpg
    caption: areta in utero
    caption_url: https://www.martasmaldone.com
mediaplayer: true
---

<!--
# These video settings are totally optional. It's only purpose
# is SEO, so that videos show up in Google hopefully with a
# thumbnail.
# More › https://developers.google.com/webmasters/videosearch/schema?hl=en&rd=1
#
# embedURL – A URL pointing to a player for the specific video.
# contentURL – A URL pointing to the actual video media file
# thumbnailUrl – A URL pointing to the video thumbnail image file.
#
#video:
#    embedURL: "https://player.vimeo.com/video/219274698"
#    contentURL: "https://player.vimeo.com/video/219274698?autoplay=1"
#    thumbnailUrl: "https://i.vimeocdn.com/video/637864672_1280x720.jpg"

more-->


text:
<!DOCTYPE html>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>思维导图</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="Shortcut Icon" href="favicon.ico">

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/app.css"/>

后退

前进

清空

列表

设置

关于

思维导图