levels.js

var levels = [
  {
    name: 'grid-column-start 1',
    instructions: {
      'en': '<p>Welcome to Grid Garden, where you write CSS code to grow your carrot garden! Water only the areas that have carrots by using the <code>grid-column-start</code> property.</p><p>For example, <code>grid-column-start: 3;</code> will water the area starting at the 3rd vertical grid line, which is another way of saying the 3rd vertical border from the left in the grid.<img src="https://code.org/api/hour/begin_codepip_grid.png"></p>',
      'lv': '<p>Laipni lūdzam spēlē Grid Garden. Šeit, rakstot CSS kodu, Tu varēsi izaudzēt savu burkānu dārzu. Lietojot <code>grid-column-start</code> metodi, aplaisti tikai tās dārza daļas, kurās atrodas burkāni.</p><p>Piemēram, <code>grid-column-start: 3;</code> , aplaistīs laukumu sākot not trešās vertikālās "grid" jeb tabulas līnijas.<img src="https://code.org/api/hour/begin_codepip_grid.png"></p>',
      'ro': '<p>Bine ai venit la Grid Garden, unde scrii cod CSS pentru a crește grădina de morcovi! Udă doar zonele care au morcovi folosind proprietatea <code>grid-column-start</code>.</p><p>De exemplu, <code>grid-column-start: 3;</code> va uda zona începând de la a treia linie verticală a gridului, adică a treia linie verticală de la stânga în grid.</p>',
      'zh-cn': '<p>欢迎来到网格花园，在这里你可以通过书写CSS代码来栽种你的胡萝卜花园！使用<code>grid-column-start</code> 属性来给胡萝卜浇水。</p><p>比如说， <code>grid-column-start: 3;</code>将会给第三列的网格开始的区域浇水，这也是描述网格中从左起第三列边界的另一种方法。</p>',
      'zh-tw': '<p>歡迎來到網格花園，在這裡你可以通過書寫 CSS 代碼來栽種你的胡蘿蔔花園！使用 <code>grid-column-start</code> 屬性來給胡蘿蔔澆水。比如說，<code>grid-column-start: 3;</code> 將會給第三行的網格開始的區域澆水，這也是描述網格中從左起第三行邊界的另一種方法。</p>',
      'tr': '<p>Havuç bahçenizi büyütmek için CSS kodu yazdığınız Grid Garden\'a hoş geldiniz! <code>grid-column-start</code> özelliğini kullanarak sadece havuç bulunan alanı sulayın.</p><p>Örneğin; <code>grid-column-start: 3;</code> 3. dikey grid çizgisinden itibaren alanı sulayacak, yani başka bir deyişle Grid\'te soldan 3. dikey çerçeveden itibaren.<img src="https://code.org/api/hour/begin_codepip_grid.png"></p>',
      'fr': '<p>Bienvenue dans Grid Garden, où vous écrivez du code CSS pour cultiver votre jardin de carotte ! Arrosez seulement les régions qui ont des carottes en utilisant la propriété <code>grid-column-start</code>.</p><p>Par exemple, <code>grid-column-start: 3;</code> arrosera la région commençant à la 3ème ligne verticale de la grille, une autre manière de le dire, c\'est la 3ème bordure verticale en partant de la gauche dans la grille.</p>',
      'de': '<p>Willkommen bei Grid Garden, wo du CSS Code schreibst, um deinen Karottengarten zu kultivieren! Wässere nur die Abschnitte, welche Karotten enthalten, indem du die <code>grid-column-start</code> Eigenschaft nutzt.</p><p>Zum Beispiel <code>grid-column-start: 3;</code> wässert den Abschnitt auf der dritten vertikalen Rasterlinie. Mit anderen Worten: die 3. Spalte von links im Raster.</p>',
      'nl': '<p>Welkom bij Grid Garden, waar je CSS-broncode schrijft om je worteltuin te laten groeien! Geef alleen de gebieden met wortels water door de <code>grid-column-start</code> property te gebruiken.</p><p>Bijvoorbeeld, <code>grid-column-start: 3;</code> geeft water aan het gebied startend op de derde verticale lijn, wat ook wel de derde verticale rand van links in het grid is.</p>',
      'pt-br': '<p>Bem-vindo ao Grid Garden, onde você escreve código CSS para as cenouras da sua horta crescerem. Irrigue apenas as áreas com cenouras usando a propriedade <code>grid-column-start</code>.</p><p>Por exemplo, <code>grid-column-start: 3;</code> irrigará a área começando na 3ª linha vertical, o que é uma forma de dizer que é a 3ª borda da grade começando da esquerda.</p>',
      'ru': '<p>Добро пожаловать в Grid Garden — место, где вы напишете CSS-код, чтобы вырастить морковный сад. Поливайте только те зоны, на которых есть морковь, используя свойство <code>grid-column-start</code>.</p><p>Например, <code>grid-column-start: 3</code> покроет водой зону, начинающуюся на третьей grid-линии по вертикали, это как сказать “третья вертикальная граница на grid-сетке слева”.</p>',
      'pl': '<p>Witaj w grze Grid Garden, w której pisząc kod CSS rozwijasz swój ogród z marchewkami! Podlewaj tylko pola z marchewkami używając właściwości <code>grid-column-start</code>.</p><p>Na przykład, <code>grid-column-start: 3;</code> nawodni obszar zaczynający się od trzeciej pionowej linii, co jest innym sposobem na powiedzenie trzecia od lewej pionowa granica.</p>',
      'es': '<p>¡Bienvenido a Grid Garden, donde escribirás tu código CSS para cultivar tu jardín de zanahorias! Riega solo las áreas que tienen zanahorias usando la propiedad <code>grid-column-start</code>.</p><p>Por ejemplo, <code>grid-column-start: 3;</code> regará el área comenzando por la tercera línea vertical, que es otra manera de decir el 3er borde vertical contando desde la izquierda de la cuadrícula.</p>',
      'sv': '<p>Välkommen till Grid Garden där du kan skriva CSS kod för att odla din trädgård med morötter! Vattna bara dom områden som har morötter genom att använda egenskapen <code>grid-column-start</code>.</p><p>T.e.x. <code>grid-column-start: 3;</code> kommer vattna området som startar på tredje vertikala gridlinjen, vilket är samma sak som att säga den tredje vertikala gridlinjen från vänster.</p>',
      'fa': '<p>به باغ گرید خوش آمدید, اینجا کد CSS می نویسید تا هویج های خود را پرورش دهید! تنها کافی است آب را با استفاده از <code>grid-column-start</code> به بخش هایی که هویج دارند برسانید.</p><p>برای مثال, <code>;grid-column-start: 3</code> ناحیه ای را که از سومین خط عمودی گرید شروع می شود آبیاری می کند , به عبارت دیگر سومین مرز عمودی از چپ در گرید.</p>',
      'it': '<p>Benvenuto su Grid Garden, dove tramite l\'uso del CSS potrai far crescere le carote del tuo giardino! Innaffia solo le aree con le carote usando la proprietà <code>grid-column-start</code>.</p><p>Per esempio, <code>grid-column-start: 3;</code> innaffierà l\'area che inizia dalla 3ª linea verticale, che è un altro modo per dire il 3° bordo verticale della griglia partendo da sinistra.</p>',
      'ko': '<p>Grid 정원에 오신것을 환영합니다. 여러분들은 CSS 코드를 작성하여 여러분의 당근 정원을 키우실 수 있습니다. 당근이 있는 지역에 <code>grid-column-start</code> 속성을 이용하여 물을 주십시오.</p><p>예를 들어, <code>grid-column-start: 3;</code>와 같이 입력시 그리드 세번째 세로선에서 시작되는 영역에 물을 불어 넣고 있습니다. 이는 그리드의 왼쪽에서 세번째 열(column) 항목을 뜻합니다.</p>',
      'el': '<p>Καλωσήλθατε στο Grid Garden, όπου γράφετε κώδικα CSS για να μεγαλώσετε τον καροτόκηπό σας! Ποτίστε μόνο τις περιοχές που έχουν καρότα χρησιμοποιώντας την ιδιότητα <code>grid-column-start</code>.</p><p>Λόγου χάρη, το <code>grid-column-start: 3;</code> θα ποτίσει την περιοχή που αρχίζει στην 3η κάθετη γραμμή πλέγματος, τουτέστιν το 3ο κάθετο σύνορο από τα αριστερά στο πλέγμα.<img src="https://code.org/api/hour/begin_codepip_grid.png"></p>',
      'ja': '<p>Grid ガーデンへようこそ。ここでは、CSS コードを書くことでニンジンを育てることができます！さっそく <code>grid-column-start</code> プロパティを使って、ニンジンがあるエリアにだけ水をやりましょう。</p><p>たとえば、<code>grid-column-start: 3;</code> と書くと、3番目の縦線から、つまりグリッドの左から3番目のボーダーから始まる領域に、水をやることができます。<img src="https://code.org/api/hour/begin_codepip_grid.png"></p>',
      'ua': '<p>Ласкаво просимо в Grid Garden, місце де ви пишете CSS код для того щоб виростити ваш морквяний сад. Поливайте тільки ті зони на яких є морква використовуючи властивість <code>grid-column-start</code>.</p><p>Наприклад, <code>grid-column-start: 3;</code> покриє водою зону, що починається на 3-ій вертикальній grid лінії, що є альтернативним способом сказати - 3-тя вертикальна межа починаючи зліва на grid сітці.</p>',
      'no': '<p>Velkommen til Grid Garden, hvor du skriver CSS-kode for å kultivere gulrothagen din! Vann kun de områdene som har gulrøtter i seg ved å bruke egenskapen <code>grid-column-start</code>.</p><p>For eksempel, <code>grid-column-start: 3;</code> vanner det området som starter på den tredje vertikale rutelinjen, som er det samme som den tredje vertikale grenselinjen fra venstre på rutenettet.<img src="https://code.org/api/hour/begin_codepip_grid.png"></p>',
      'pt-pt': '<p>Bem-vindo/a ao Grid Garden, onde escreves código CSS para cultivar a tua horta de cenouras! Rega apenas as áreas com cenouras utilizando a propriedade <code>grid-column-start</code>.</p><p>Por exemplo, <code>grid-column-start: 3;</code> regará a área que começa na 3ª linha vertical da grelha, que por outras palavras é a 3ª borda vertical contando desde a esquerda da grelha.</p>',
      'bg': '<p>Добре дошли в Grid Garden - мястото, където пишете CSS код, за да развиете Вашата морковена градина! Поливайте само зоните, в които има моркови, използвайки <code>grid-column-start</code> свойството.</p><p>Например, <code>grid-column-start: 3;</code> ще полее зоната, която започва от 3-тата вертикална линия на решетката или с други думи 3-тата вертикална граница от ляво на решетката.</p>',
      'ca': '<p>Benvingut a Grid Garden, on podras escriure codi CSS per cultivar un jardí de pastanagues! Rega només les àrees que tenen pastanagues utilitzant la propietat <code>grid-column-start</code>.</p><p>Per exemple, <code>grid-column-start: 3;</code> regarà l\'àrea començant per la tercera línia vertical, una altra manera d\'anomenar la 3a vora vertical comptant des de l\'esquerra de la quadrícula.</p>',
      'vi': '<p>Chào mừng cậu đã đến với Grid Garden, tại đây cậu sẽ dùng CSS code để vun trồng khu vườn cà-rốt của mình! Tưới nước vào những khu vực trồng cà rốt bằng cách sử dụng thuộc tính <code>grid-column-start</code>.</p><p>Ví dụ <code>grid-column-start: 3;</code> sẽ tưới nước cho khu vực bắt đầu từ đường kẻ dọc thứ 3 trừ trái qua.<img src="https://code.org/api/hour/begin_codepip_grid.png"></p>',
      'ar' : '<p>مرحبا بك في حديقة الجريد, حيث تكتب اكواد سي اس اس لتنمية حديقة الجزر الخاصة بك ! باستخدام خاصية <code dir="ltr">grid-column-start</code></p><p>مثلا, <code>grid-column-start: 3;</code>سوف تروي المنطقة التي تبدا من ثالث خط عمودي, وهي طريقة اخرة لقول الحد الراسي الثالث من اليسار في الجريد<img src="https://code.org/api/hour/begin_codepip_grid.png"></p>',
      'fi': '<p>Tämä on Grid Garden – peli, jossa hoidat porkkanamaata CSS-koodia kirjoittamalla! Kastele vain ne alueet, joilla on porkkanoita, <code>grid-column-start</code>-ominaisuuden avulla.</p><p>Esimerkiksi <code>grid-column-start: 3;</code> kastelee alueen, joka alkaa ruudukon kolmannesta pystyviivasta eli kolmannesta pystysuuntaisesta reunaviivasta vasemmalta laskien.<img src="https://code.org/api/hour/begin_codepip_grid.png"></p>',
      'hu': '<p>Üdvözöllek a Grid Gardenben, ahol CSS kódot írva termeszthetsz répát! Csak a répákat tartalmazó területeket öntözd a <code>grid-column-start</code> tulajdonság használatával!</p><p>Például a <code>grid-column-start: 3;</code> a rács bal oldalától számított harmadik függőleges rácsvonalnál kezdődő területet öntözi meg.<img src="https://code.org/api/hour/begin_codepip_grid.png"></p>',
      'id': '<p>Selamat datang di Grid Garden, dimana kamu menulis kode CSS untuk menumbuhkan kebun wortel anda! Siram hanya area yang memiliki wortel dengan menggunakan properti <code>grid-column-start</code>.</p><p>Sebagai contoh, <code>grid-column-start: 3;</code> akan menyiram area dimulai dari garis vertikal grid ke-3, yang merupakan cara lain untuk mengatakan batasan vertikal ke-3 dari kiri di grid.<img src="https://code.org/api/hour/begin_codepip_grid.png"></p>',
      'tl': '<p>Maligayang pagdating sa Grid Garden, kung saan magco-code ka ng CSS para mapalaki ang hardin mo ng karot! Diligan lang ang lugar na may mga karot gamit ang property na <code>grid-column-start</code>.</p><p>Halimbawa, didiligan ng <code>grid-column-start: 3;</code> ang area na nagsisimula sa pangatlong linya sa vertical grid, o pwede rin sabihin na pangatlong vertical border mula sa kaliwa ng grid .<img src="https://code.org/api/hour/begin_codepip_grid.png"></p>',
      'al': '<p>Mirësevjen në Grid Garden, aty ku shkruan CSS code për të rritur karotat në një kopësht! Ujit vetëm zonat që kanë karota duke përdorur <code>grid-column-start</code> property.</p><p>Për shembull, <code>grid-column-start: 3;</code> do të ujise zonën që fillon në vijën e tretë vertikale, e cila është një menyrë tjetër për të thenë kufiri i tretë vertikal nga e majata në grid.<img src="https://code.org/api/hour/begin_codepip_grid.png"></p>',
    },
    board: 'c',
    selector: '> :nth-child(1)',
    style: {'grid-column-start': '3'},
    before: "#garden {\n  display: grid;\n  grid-template-columns: 20% 20% 20% 20% 20%;\n  grid-template-rows: 20% 20% 20% 20% 20%;\n}\n\n#water {\n",
    after: "}"
  },
  {
    name: 'grid-column-start 2',
    instructions: {
      'en': '<p>Uh oh, looks like weeds are growing in the corner of your garden. Use <code>grid-column-start</code> to poison them. Note that the weeds start at the 5th vertical grid line.</p>',
      'lv': '<p>Izskatās, ka tava dārza stūrī iemetušās nezāles. Lai noindētu šīs nezāles, lieto <code>grid-column-start</code> Atceries, ka nezāles izaugušas sākot no 5 vertikālās "grid" līnijas.</p>',
      'ro': '<p>Ah, se pare că au început să crească buruieni în colțul grădinii tale. Folosește <code>grid-column-start</code> să le otrăvești. Notează că buruienile încep la a cincea linie verticală din grid.</p>',
      'zh-cn': '<p>哎呀，在你的花园的角落里好像长着一些杂草。用<code>grid-column-start</code>来除掉杂草。注意，杂草从第五个网格列开始。</p>',
      'zh-tw': '<p>哎呀，在你的花園的角落裡好像長著一些雜草。用 <code>grid-column-start</code> 來除掉雜草。注意，雜草從第五行開始。</p>',
      'tr': '<p>Hayda! sanki bahçenizin köşesinde yabani otlar büyüyor. Onları zehirlemek için <code>grid-column-start</code> kullanın. Yabani otların, 5. dikey Grid çizgisinden başlayacağına dikkat edin.</p>',
      'fr': '<p>Houlà, il semblerait que les mauvaises herbes poussent dans le coin de votre jardin. Utilisez <code>grid-column-start</code> pour les empoisonner. Remarquez que les mauvaises herbes commencent à la 5ème ligne verticale de la grille.</p>',
      'de': '<p>Oje, sieht aus als würde in der Ecke des Gartens Unkraut wachsen. Benutze <code>grid-column-start</code>, um es zu vergiften. Beachte, dass das Unkraut in der fünften vertikalen Rasterline beginnt.</p>',
      'nl': '<p>O o, het lijkt erop dat er onkruid groeit in de hoek van je tuin. Gebruik <code>grid-column-start</code> om het te vergiftigen. Onthoud dat het onkruid begint op de 5e verticale gridlijn.</p>',
      'pt-br': '<p>Opa, parece que há ervas daninhas crescendo no canto da sua horta. Use <code>grid-column-start</code> para envenená-las. Note que as ervas daninhas começam na 5ª linha vertical da grade.</p>',
      'ru': '<p>Оу, кажется, сорняки растут прямо в углу сада. Используйте <code>grid-column-start</code>, чтобы отравить их. Помните: сорняки начинаются на пятой вертикальной grid-линии.</p>',
      'pl': '<p>O nie, wygląda na to, że chwasty urosły w rogu twojego ogrodu. Użyj <code>grid-column-start</code> by je otruć. Zauważ, że chwasty zaczynają się od piątej pionowej linii.</p>',
      'es': '<p>Oh oh, parece que hay malas hierbas creciendo en la esquina de tu jardín. Usa <code>grid-column-start</code> para envenenarlas. Fíjate en que las malas hierbas comienzan en el quinto borde vertical de la cuadrícula.</p>',
      'sv': '<p>Åh nej, det ser ut som att det växer ogräs i trädgården. Använd <code>grid-column-start</code> för att förgifta dom. Notera att ogräset börjar på femte vertikala gridlinjen.</p>',
      'fa': '<p>ای وای, انگار در گوشه ی باغت علف های هرز رشد کرده اند. از <code>grid-column-start</code> برای سمپاشی آن استفاده کن. دقت کن که علف های هرز از پنجمین خط عمودی گرید شروع می شوند.</p>',
      'it': '<p>Ahi ahi, sembra che delle erbacce stiano crescendo in un angolo del tuo giardino. Usa <code>grid-column-start</code> per diserbarle (poison). Nota che le erbacce iniziano alla 5ª linea verticale della griglia.</p>',
      'ko': '<p>저런, 정원에 잡초가 자라고 있습니다. <code>grid-column-start</code>을 사용하여 잡초를 제거하세요. 잡초는 5번째 열(column)에서 자라고 있습니다.</p>',
      'el': '<p>Ωχ όχι, φαίνεται ότι ζιζάνια μεγαλώνουν στην γωνία του κήπου σας. Χρησιμοποιήστε το <code>grid-column-start</code> για να τα δηλητηριάσετε. Σημειώστε ότι τα ζιζάνια αρχίζουν στην 5η κάθετη γραμμή πλέγματος.</p>',
      'ja': '<p>おっと、あなたのガーデンの端っこの方に雑草が生えてしまっていますね。<code>grid-column-start</code> を使って毒を撒きましょう。雑草が生えているのは、5番目の縦線から始まる場所ですね。</p>',
      'ua': '<p>Оу, здається ніби бур\'яни ростуть прямо в кутку вашого саду. Використовуйте <code>grid-column-start</code> щоб отруїти їх. Пам\'ятайте, що бур\'яни починаються на 5-ій вертикальній grid лінії.</p>',
      'no': '<p>Å nei, det ser ut til at ugress vokser i hjørnet av hagen din. Bruk <code>grid-column-start</code> for å forgifte ugresset. Merk at ugresset starter på den femte vertikale rutelinjen.</p>',
      'pt-pt': '<p>Oh não, parece que há ervas daninhas a crescer no canto da tua horta! Utiliza <code>grid-column-start</code> para envenená-las. Observa que as ervas daninhas começam na 5ª linha vertical da grelha.</p>',
      'bg': '<p>О не, изглежда сякаш растат плевели в ъгъла на Вашата градина. Използвайте <code>grid-column-start</code>, за да ги отровите. Забележете, че плевелите започват от 5-ата колона на решетката.</p>',
      'ca': '<p>Oh oh, sembla que hi ha males herbes creixent a la cantonada del jardí. Utilitza <code>grid-column-start</code> per enverinar-les. Fixa\'t que les males herbes comencen a la cinquena vora vertical de la quadrícula.</p>',
      'vi': '<p>Ơ kìa! Trông có vẻ như cỏ dại đang phát triển phía góc phải của khu vườn. Hãy sử dụng <code>grid-column-start</code> để tiêu diệt chúng. Nhớ rằng, cỏ dại bắt đầu mọc từ đường kẻ dọc thứ 5.</p>',
      'ar': '<p> اوه, يبدو ان الاعشاب الضارة تنمو في ركن حديقتك. استخدم <code>grid-column-start</code>  لتسممهم, لاحظ أن الحشائش تبدأ عند خط الشبكة العامودي الخامس.</p>',
      'fi': '<p>Voi ei! Puutarhan nurkassa kasvaa rikkaruohoja. Myrkytä ne määrittämällä ominaisuus <code>grid-column-start</code>. Huomaa, että rikkaruohot alkavat viidennestä pystyviivasta.</p>',
      'hu': '<p>Ajajj! Úgy néz ki, gyom nő a kerted sarkában! Használd a <code>grid-column-start</code> tulajdonságot a gyomirtózáshoz! Figyelj rá, hogy a gyom az ötödik függőleges rácsvonalnál kezdődik!</p>',
      'id': '<p>Uh oh, sepertinya rumput liar tumbuh di sudut kebunmu. Gunakan <code>grid-column-start</code> untuk meracuninya. Perhatikan bahwa rumput liarnya bermula di garis vertikal grid ke-5.</p>',
      'tl': '<p>Awit, mukhang may mga damo na tumutubo sa sulok ng hardin mo. Gamitin ang <code>grid-column-start</code> para lasunin sila. Tandaan na ang mga damo ay nasisimula sa panglimang linya sa vertical grid.</p>',
      'al': '<p>Oh jo, si duket shkurret po rriten në cep të kopështit tuaj. Përdor <code>grid-column-start</code> për ti helmuar. Ki parasysh se shkurret fillojnë në vijën e pestë vertikale të grid.</p>',
    },
    board: 'w',
    selector: '> :nth-child(1)',
    style: {'grid-column-start': '5'},
    before: "#garden {\n  display: grid;\n  grid-template-columns: 20% 20% 20% 20% 20%;\n  grid-template-rows: 20% 20% 20% 20% 20%;\n}\n\n#poison {\n",
    after: "}"
  },
  {
    name: 'grid-column-end 1',
    instructions: {
      'en': '<p>When <code>grid-column-start</code> is used alone, the grid item by default will span exactly one column. However, you can extend the item across multiple columns by adding the <code>grid-column-end</code> property.</p><p>Using <code>grid-column-end</code>, water all of your carrots while avoiding the dirt. We don\'t want to waste any water! Note that the carrots start at the 1st vertical grid line and end at the 4th.</p>',
      'lv': '<p>Lietojot <code>grid-column-start</code> vienu pašu, katrs "grid" elements aizņems tieši vienu kolonnu. Taču pievienojot <code>grid-column-end</code> vērtību, tu vari izstiept elementu pa vairākām kolonnām. Lieto <code>grid-column-end</code> un, izvairoties no dubļiem, aplaisti visus savus burkānus. Atceries, ka mēs nevēlamies lieki tērēt ūdeni. Ievēro, ka burkāni aug sākot no pirmās vertikālās "grid" līnijas un vairs neaug sākot no ceturtās.</p>',
      'ro': '<p>Când proprietatea <code>grid-column-start</code> este folosită singură, în mod implicit elementul gridului se va întinde pe o coloană. Poți să extinzi elementul pe mai multe coloane adăugând proprietatea <code>grid-column-end</code>.</p><p>Folosind <code>grid-column-end</code>, udă toți morcovii ocolind pământul. Nu vrem să risipim apă! Notează că morcovii încep la prima linie verticală în grid și se termină la a patra.</p>',
      'zh-cn': '<p>若仅使用<code>grid-column-start</code>，网格默认只占一列。然而，你可以使用<code>grid-column-end</code>属性将网格拓展到多列。</p><p>使用<code>grid-column-end</code>，将你的所有胡萝卜浇水，但不要将水浇到土地上哦，我们要节约用水！注意，胡萝卜从第一列开始，第四列结束。</p>',
      'zh-tw': '<p>若僅使用 <code>grid-column-start</code>，網格默認只佔一行。然而，你可以使用 <code>grid-column-end</code> 屬性將網格拓展到多行。</p><p>使用 <code>grid-column-end</code>，將你的所有胡蘿蔔澆水，但請避免澆到泥土上，我們要節約用水！注意，胡蘿蔔從第一行開始，第四行结束。</p>',
      'tr': '<p><code>grid-column-start</code> tek başına kullanıldığında, varsayılan olarak grid öğesi tam olarak bir sütun üzerine yayılır. Bununla birlikte, <code>grid-column-end</code> özelliğini ekleyerek öğeyi birden çok sütuna genişletebilirsiniz.</p><p><code>grid-column-end</code>\'i kullanarak havuçlarınızı sularken, kirden de kaçının. Herhangi bir suyu boşa harcamak istemiyoruz! Havuçların 1. dikey grid çizgisinden başlayıp 4. çizgide bittiğini unutmayın.</p>',
      'fr': '<p>Lorsque <code>grid-column-start</code> est utilisé individuellement, l\'élément de la grille s\'étendra par défaut sur une colonne exactement. Pourtant, vous pouvez étendre l\'élément sur plusieurs colonnes en ajoutant la propriété <code>grid-column-end</code>.</p><p>En utilisant <code>grid-column-end</code>, arrosez toutes vos carottes tout en évitant la boue. Nous ne voulons pas gaspiller d\'eau ! Remarquez que les carottes commencent à la 1ère ligne verticale de la grille et terminent à la 4ème.</p>',
      'de': '<p>Wenn <code>grid-column-start</code> alleine benutzt wird, umfasst das Rasterelement standardmäßig genau eine Spalte. Du kannst den Umfang des Elements jedoch auf mehrere Spalten mit Hilfe der <code>grid-column-end</code> Eigenschaft erweitern.</p><p>Benutze <code>grid-column-end</code>, um alle Karotten zu wässern. Vermeide dabei die Erdabschnitte, wir wollen schließlich kein Wasser verschwenden! Beachte, dass die Karotten auf der ersten vertikalen Rasterlinie beginnen und auf der vierten aufhören.</p>',
      'nl': '<p>Wanneer alleen <code>grid-column-start</code> is gebruikt, zal het griditem standaard een breedte hebben van één column. Maar je kan het verbreden over meerdere columns door de <code>grid-column-end</code>-property toe te voegen.</p><p>Met <code>grid-column-end</code> geef al je wortels water, terwijl je het braakland vermijdt. We willen geen water verspillen! Houd er rekening mee dat de wortels beginnen bij de 1e verticale gridlijn en eindigen op 4e.</p>',
      'pt-br': '<p>Quando <code>grid-column-start</code> é usado sozinho, o item da grade por padrão irá ocupar exatamente uma coluna. Entretanto, você pode extender o item através de múltiplas colunas adicionando a propriedade <code>grid-column-end</code>.</p><p>Usando <code>grid-column-end</code>, todas suas cenouras são irrigadas enquanto se evita uma inundação. Não queremos desperdiçar água! Note que as cenouras começam na 1ª linha vertical da grade e terminam na 4ª.</p>',
      'ru': '<p>Когда вы используете только <code>grid-column-start</code>, grid-элемент по умолчанию “захватит” только один столбец. Однако вы можете увеличить элемент между несколькими столбцами, если добавите свойство <code>grid-column-end</code>.</p><p>Используя <code>grid-column-end</code>, полейте всю морковь, избегая пустые участки. Ведь мы не хотим использовать воду напрасно! Помните, что морковь начинается на первой вертикальной grid-линии и заканчивается на четвёртой.</p>',
      'pl': '<p>Kiedy właściwość <code>grid-column-start</code> jest użyta pojedynczo, element domyślnie zajmie dokładnie jedną kolumnę. Jednakże, możesz rozszerzyć element na wiele kolumn dodając właściwość <code>grid-column-end</code>.</p><p>Używając <code>grid-column-end</code>, podlej tylko pola z marchewkami. Nie chcemy zmarnować ani kropli wody! Zauważ, że marchewki zaczynają się od pierwszej pionowej linii i kończą na czwartej.</p>',
      'es': '<p>Cuando <code>grid-column-start</code> se usa solo, la expansión por defecto del elemento en la cuadrícula será de exactamente una columna. No obstante, puedes extender el elemento varias columnas añadiendo la propiedad <code>grid-column-end</code>.</p><p>Usando <code>grid-column-end</code>, riega todas las zanahorias evitando que se forme barro. ¡No queremos malgastar agua! Fíjate en que las zanahorias comienzan en el 1er borde vertical y terminan en el 4º.</p>',
      'sv': '<p>När <code>grid-column-start</code> används så kommer elementet sträcka sig exakt en kolumn. Du kan ändra det genom att sätta egenskapen <code>grid-column-end</code>.</p><p>Använd <code>grid-column-end</code> för att vattna dina morötter, men undvik att vattna där det inte finns. Vi vill inte slösa på vatten! Notera att morötterna startar på första vertikala gridlinjen och slutar på fjärde.</p>',
      'fa': '<p>وقتی <code>grid-column-start</code> به تنهایی استفاده شود, آیتم گرید به صورت پیش فرض دقیقا یک ستون را پوشش می دهد. هرچند, شما می توانید با اضافه کردن <code>grid-column-end</code> آیتم را در امتداد چندین ستون گسترش دهید.</p><p>با استفاده از <code>grid-column-end</code>, هویج هایتان را آبیاری کنید. ما نمی خواهیم آب را هدر بدهیم پس روی خاک آب ندهید!  توجه کنید که هویج ها از اولین خط عمودی گرید شروع می شوند و در چهارمین خط عمودی به پایان می رسند.</p>',
      'it': '<p>Quando la proprietà <code>grid-column-start</code> è usata da sola, l\'elemento nella colonna corrispondente occuperà solamente uno spazio. Comunque, puoi estendere l\'elemento su piú colonne aggiungendo la proprietà <code>grid-column-end</code>.</p><p>Usa <code>grid-column-end</code> per innaffiare solamente l\'area occupata dalle carote, evitando di bagnare il terreno vuoto. Non vogliamo sprecare nessuna goccia d\'acqua! Nota che le carote iniziano alla 1ª linea verticale e finiscono alla 4ª.</p>',
      'ko': '<p><code>grid-column-start</code>이 단독으로 사용될때는, 한개의 그리드 열(column)을 나타냅니다. 하지만, <code>grid-column-end</code> 속성을 같이 사용하면 여러 열(column)에 걸쳐 확장이 가능합니다.</p><p><code>grid-column-end</code>를 이용하여, 먼지를 피해 모든 당근에 물을 주세요. 물이 낭비되지 않도록 주의하세요! 당근은 첫번째 수직선에서 네번째 수직선까지 이어져있습니다.</p>',
      'el': '<p>Όταν το <code>grid-column-start</code> χρησιμοποιείται από μόνο του, το αντικείμενο του πλέγματος από προεπιλογή θα καλύπτει ακριβώς μία στήλη. Όμως, μπορείτε να εκτείνετε το αντικείμενο κατά μήκος πολλαπλών στηλών προσθέτοντας την ιδιότητα <code>grid-column-end</code>.</p><p>Χρησιμοποιώντας το <code>grid-column-end</code>, ποτίστε όλα τα καρότα σας αποφεύγοντας το χώμα. Δεν θέλουμε να σπαταλήσουμε νερό! Σημειώστε ότι τα καρότα αρχίζουν στην 1η κάθετη γραμμή πλέγματος και τελειώνουν στην 4η.</p>',
      'ja': '<p><code>grid-column-start</code> を単独で使った時は、グリッドアイテムはデフォルトでちょうど1列になります。でも、<code>grid-column-end</code> プロパティを使えば、複数の列に渡って広げられます。私たちは水を一滴でもムダにしたくありません！ニンジンがある場所は、左端の1番目の縦線から始まり、4番目の縦線で終わっていますね。</p>',
      'ua': '<p>Коли ви використовуєте тільки <code>grid-column-start</code>, grid елемент за замовчуванням "захопить" тільки один стовпець. Однак, ви можете збільшити елемент між декількома стовпцями якщо додасте властивість <code>grid-column-end</code>.</p><p>Використовуючи <code>grid-column-end</code>, полийте всю вашу моркву, при цьому уникаючи порожні ділянки. Ми не хочемо використовувати воду марно! Пам\'ятайте, що морква починається на 1-ій вертикальній grid лінії і закінчується на 4-ій.',
      'no': '<p>Når <code>grid-column-start</code> brukes alene, strekker gridelementet seg nøyaktig over en kolonne som standard. Dette kan endres ved å bruke <code>grid-column-end</code> i tillegg, slik at elementet heller strekker seg over flere kolonner.</p><p>Vann alle gulrøttene dine med <code>grid-column-end</code>, samtidig som du unngår å vanne områder der det kun er jord. Vi vil ikke kaste bort noe vann! Merk at gulrøttene starter på den første vertikale rutelinjen og slutter på den fjerde.</p>',
      'pt-pt': '<p>Quando a propriedade <code>grid-column-start</code> é utilizada sozinha, por defeito o elemento da grelha ocupará exactamente uma coluna. No entanto, podes estender o elemento por múltiplas colunas adicionando a propriedade <code>grid-column-end</code>.</p><p>Utiliza <code>grid-column-end</code> para regar todas as tuas cenouras, evitando o terreno vazio. Não queremos desperdiçar água! Observa que as cenouras começam na 1ª linha vertical da grelha e terminam na 4ª.</p>',
      'bg': '<p>Когато използвате <code>grid-column-start</code> самостоятелно, grid-елементът по подразбиране ще обхваща точно една колона. Въпреки това, можете да разширите елемента на няколкото колони, използвайки <code>grid-column-end</code> свойството.</p><p>Използвайки <code>grid-column-end</code>, ще полеете всички Ваши моркови, докато избягвате замърсяването. Не искаме да губим каквато и да било вода! Забележете, че морковите започват от 1-вата колона на Вашата решетка и завършват в 4-тата.</p>',
      'ca': '<p>Quan <code>grid-column-start</code> s\'utilitza sol, l\'expansió per defecte de l\'element a la quadrícula serà exactament d\'una columna. No obstant això, pots extendre l\'element varies columnes afegint la propietat <code>grid-column-end</code>.</p><p>Utilitzant <code>grid-column-end</code>, rega totes les pastanagues evitant formar fang. No volem malgastar aigüa! Fixa\'t que les pastanagues comencen a la 1a vora vertical i acaben a la 4a.</p>',
      'vi': '<p>Khi <code>grid-column-start</code> được dùng độc lập, thì đối tượng đó sẽ chiếm một khoảng chính xác bằng một cột. Tuy nhiên, cậu có thể mở rộng thêm nhiều cột nữa bằng thuộc tính <code>grid-column-end</code>.</p><p>Hãy sử dụng <code>grid-column-end</code> để tưới nước cho cà-rốt của mình. Nhớ đừng lãng phí nước vào những khu vực đất trống nhé! Cà-rốt được trồng bắt đầu từ đường kẻ dọc thứ nhất và kết thúc ở đường thứ 4.</p>',
      'ar': '<p>عند استخدام <code>grid-column-start</code> بمفرده, سيمتد عالعنصر بشكل افتراضي الى عامود واحد. لكن يمكنك توسيع العنصر على اكثر من صف عن طريق اضافة خاصية  <code>grid-column-end</code> </p> <p>باستخدام <code>grid-column-end</code> ,اسق الجزر مع تجنب مربعات التراب لانريد هدر اي مياه ! حظ ان الجزر يبدا عند الخط العمودي الاول وينتهي عند الخط العمودي الرابع .  ',
      'fi': '<p>Jos määrität vain <code>grid-column-start</code>-ominaisuuden, ruudukon elementti on yhden pystyrivin levyinen. Voit kuitenkin levittää elementin usean pystyrivin levyiseksi lisäämällä ominaisuuden <code>grid-column-end</code>.</p><p>Kastele kaikki porkkanat määrittämällä <code>grid-column-end</code>-ominaisuus. Älä kuitenkaan tuhlaa vettä kastelemalla pelkkää multaa! Huomaa, että porkkanat alkavat ensimmäisestä pystyviivasta ja loppuvat neljänteen.</p>',
      'hu': '<p>Ha kizárólag a <code>grid-column-start</code> tulajdonságot használod, a rácselem alapértelmezésben pontosan egy oszlopra fog kiterjedni. A rácselemet azonban több oszlopnyira is kiterjesztheted a <code>grid-column-end</code> tulajdonságot használva.</p><p>Az összes répád megöntözéséhez használd a <code>grid-column-end</code> tulajdonságot! Kerüld a piszkos munkát, nem akarunk vizet pazarolni! Figyelj rá, hogy a répáid az első vertikális rácsvonalnál kezdődnek és a negyediknél végződnek!</p>',
      'id': '<p>Saat <code>grid-column-start</code> digunakan sendiri, secara default item grid akan menjangkau secara tepat satu kolom. Namun, kamu dapat memperluas item di beberapa kolom dengan menambahkan properti <code>grid-column-end</code>.</p><p>Menggunakan <code>grid-column-end</code>, siram semua wortelmu sambil menghindari tanah. Kita tidak ingin membuang-buang air! Perhatikan bahwa wortelnya bermula di garis vertikal grid ke-1 dan berakhir di garis ke-4.</p>',
      'tl': '<p>\'Pag <code>grid-column-start</code> lang ang ginamit, ang default ay mag-i-span ng eksaktong isang column ang grid item. Pero, pwede mong i-extend ang item sa tapat ng maramihang column sa paglalagay ng property na <code>grid-column-end</code>.</p><p>Gamit ang <code>grid-column-end</code>, diligan ang mga karot mo pero iwasan mo ang lupa. \'Wag tayong magsayang ng tubig! Tandaan na ang mga karot ay nasisimula sa unang linya sa vertical grid at nagtatapos sa pang-apat.</p>',
      'al': '<p>Kur <code>grid-column-start</code> përdoret vetëm, grid item si fillim do të shtrihet vetëm një kolonë. Megjithatë, ju mund ta zgjeroni item përtej kolonavë duke shtuar <code>grid-column-end</code> përkatesisht.</p><p>Duke përdorur <code>grid-column-end</code>, ujsni të gjitha karotat duke shmangur dherat. Ne nuk duam të shpërdorojmë ujin! Kini parasysh se karotat fillojnë në vijën e parë vertikale të grid dhe përfundojnë ne të katertën.</p>',
    },
    board: 'c',
    classes: {'#garden > *, #plants > *': 'grid-column-start-1'},
    selector: '> :nth-child(1)',
    style: {'grid-column-end': '4'},
    before: "#garden {\n  display: grid;\n  grid-template-columns: 20% 20% 20% 20% 20%;\n  grid-template-rows: 20% 20% 20% 20% 20%;\n}\n\n#water {\n  grid-column-start: 1;\n",
    after: "}"
  },
  {
    name: 'grid-column-end 2',
    instructions: {
      'en': '<p>When pairing <code>grid-column-start</code> and <code>grid-column-end</code>, you might assume that the end value has to be greater than the start value. But this turns out not the case!</p><p>Try setting <code>grid-column-end</code> to a value less than 5 to water your carrots.</p>',
      'lv': '<p>Lietojot <code>grid-column-start</code> un <code>grid-column-end</code>, sākotnēji varētu likties, ka beigu vērtībai jābūt lielākai nekā sākuma. Taču tā nav.</p></p>Pamēģini piešķirt <code>grid-column-end</code> vērtību, kas mazāka par 5 un tādā veidā aplaistīt savus burkānus</p>',
      'ro': '<p>Când combini <code>grid-column-start</code> și <code>grid-column-end</code>, s-ar putea să presupui că valoarea de la sfârșit trebuie să fie mai mare decât cea de la început. Nu este cazul!</p><p>Încearcă să setezi <code>grid-column-end</code> la o valoare mai mică decât 5 ca să uzi morcovii tăi.</p>',
      'zh-cn': '<p>当将<code>grid-column-start</code>和<code>grid-column-end</code>一起使用时，你也许已经注意到结束的值比起始的值大。但事实证明并非如此！</p><p>尝试设置<code>grid-column-end</code>的值小于5，以此来给胡萝卜浇水。</p>',
      'zh-tw': '<p>當將 <code>grid-column-start</code> 和 <code>grid-column-end</code> 一起使用時，你也許已經注意到結束的值比起始的值大。但事實證明並非如此！</p><p>嘗試設置 <code>grid-column-end</code> 的值小於 5，以此來給胡蘿蔔澆水。</p>',
      'tr': '<p><code>grid-column-start</code> ve <code>grid-column-end</code> özelliklerini eşleştirirken, bitiş değerinin, başlangıç değerinden daha büyük olması gerektiğini varsayabilirsiniz. Ancak durum böyle değil!</p><p> Havuçlarınızı suya koymak için <code>grid-column-end</code> değerini 5\'den küçük bir değere ayarlamayı deneyin.</p>',
      'fr': '<p>En associant <code>grid-column-start</code> et <code>grid-column-end</code>, vous pouvez penser que la valeur de fin doit être supérieure à la valeur de début. Mais ce n\'est pas le cas !</p><p>Essayez de définir <code>grid-column-end</code> avec une valeur inférieure à 5 pour arroser vos carottes.</p>',
      'de': '<p>Beim gemeinsamen Einsatz von <code>grid-column-start</code> und <code>grid-column-end</code> könnte man annehmen, dass der Endwert größer als der Startwert sein muss. Es zeigt sich aber, dass dies nicht der Fall ist!</p><p>Versuche, <code>grid-column-end</code> auf einen Wert kleiner als 5 einzustellen, um deine Karotten zu wässern.</p>',
      'nl': '<p>Wanneer je <code>grid-column-start</code> en <code>grid-column-end</code> tegelijk gebruikt, kan je mogelijk aannemen dat de ‘end’-waarde hoger moet zijn dan de ‘start’-waarde. Dat is niet zo!</p><p>Probeer <code>grid-column-end</code> een waarde van minder dan 5 te geven om je wortels water te geven.</p>',
      'pt-br': '<p>Quando se junta <code>grid-column-start</code> e <code>grid-column-end</code>, você deve assumir que o valor final tem que ser maior que o valor inicial. Mas esse não é o caso!</p><p>Tente definir <code>grid-column-end</code> para um valor menor que 5 para irrigar suas cenouras.</p>',
      'ru': '<p>Когда вы соединяли <code>grid-column-start</code> и <code>grid-column-end</code>, вы могли подумать, что конечное значение обязательно должно быть больше начального. Но это не так!</p><p>Попробуйте задать свойству <code>grid-column-end</code> значение меньше, чем 5, чтобы полить морковь.</p>',
      'pl': '<p>Kiedy używasz razem <code>grid-column-start</code> i <code>grid-column-end</code>, możesz zakładać że końcowa wartość musi być większa od początkowej. Ale okazuje się, że to nieprawda!</p><p>Spróbuj ustawić <code>grid-column-end</code> na wartość mniejszą niż 5 aby podlać swoje marchewki.</p>',
      'es': '<p>Al emparejar <code>grid-column-start</code> y <code>grid-column-end</code>, podrías asumir que el valor final tiene que ser mayor que el valor inicial. ¡Pero no es el caso!</p><p>Intenta establecer <code>grid-column-end</code> a un valor inferior a 5 para regar tus zanahorias.</p>',
      'sv': '<p>När man parar ihop <code>grid-column-start</code> med <code>grid-column-end</code> kan man anta att at slutvärdet måste vara högre än startvärdet. Så är dock inte fallet!</p><p>Testa sätt <code>grid-column-end</code> till ett värde lägre än 5 för att vattna dina morötter.</p>',
      'fa': '<p>وقتی <code>grid-column-start</code> و <code>grid-column-end</code> در کنار هم استفاده می شوند, ممکن است فرض کنید که مقدار پایانی حتما باید بزرگتر از مقدار شروع باشد. اما اینگونه نیست!</p><p>این دفعه به <code>grid-column-end</code> یک مقدار کمتر از 5 بدهید تا هویج ها را آبیاری کنید.</p>',
      'it': '<p>Quando combini <code>grid-column-start</code> e <code>grid-column-end</code>, potresti pensare che il valore finale debba essere maggiore di quello iniziale. Ma non è così!</p><p>Prova ad innaffiare le carote assegnando un valore inferiore a 5 a <code>grid-column-end</code>.</p>',
      'ko': '<p><code>grid-column-start</code> 와 <code>grid-column-end</code>를 같이 사용할때, 시작 값보다 마지막 값이 더 커야한다고 생각하실 수 있습니다. 하지만 꼭 그렇지만 않습니다!</p><p><code>grid-column-end</code>를 5보다 낮은 값으로 설정하여 당근에 물을 주시기 바랍니다.</p>',
      'el': '<p>Όταν χρησιμοποιείτε μαζί το <code>grid-column-start</code> και το <code>grid-column-end</code>, μπορεί να υποθέσετε ότι η τελική αξία πρέπει να είναι μεγαλύτερη από την αρχική. Αυτό όμως δεν ισχύει!</p><p>Δοκιμάστε να ορίσετε το <code>grid-column-end</code> σε μία αξία μικρότερη από 5 για να ποτίσετε τα καρότα σας.</p>',
      'ja': '<p><code>grid-column-start</code> と <code>grid-column-end</code> をセットで使った時、なんとなく end の数は start の数より大きくなければいけないと思っていませんでしたか？実は違います！</p><p>試しに <code>grid-column-end</code> を 5 より小さい値にして水をやってみましょう。</p>',
      'ua': '<p>Коли ви з\'єднували <code>grid-column-start</code> і <code>grid-column-end</code>, ви могли подумати що кінцеве значення має бути більше ніж початкове значення. Виявляється, це не так!</p><p>Спробуйте надати <code>grid-column-end</code> значення менше ніж 5 щоб полити вашу моркву.',
      'no': '<p>Når du bruker <code>grid-column-start</code> og <code>grid-column-end</code> sammen, går du kanskje ut i fra at sluttverdien må være høyere enn startverdien. Dette er ikke tilfellet!</p><p>Prøv å gi <code>grid-column-end</code> en verdi som er mindre enn 5 for å vanne gulrøttene dine.</p>',
      'pt-pt': '<p>Emparelhando <code>grid-column-start</code> e <code>grid-column-end</code>, poderás assumir que o valor final tem que ser superior ao valor inicial. Mas não é o caso!</p><p>Tenta estabelecer <code>grid-column-end</code> com um valor inferior a 5 para regar as tuas cenouras.</p>',
      'bg': '<p>Когато използвате заедно <code>grid-column-start</code> и <code>grid-column-end</code>, може да приемете, че крайната стойност трябва да бъде по-голяма от началната. Но това не е съвсем така!</p><p>Пробвайте да зададете стойност на <code>grid-column-end</code> по-малка от 5, за да полеете Вашите моркови.</p>',
      'ca': '<p>A l\'emparellar <code>grid-column-start</code> i <code>grid-column-end</code>, podries assumir que el valor final ha de ser més gran que el valor inicial. Però no és així!</p><p>Intenta establir <code>grid-column-end</code> un valor inferior a 5 per regar les pastanagues.</p>',
      'vi': '<p>Khi kết hợp <code>grid-column-start</code> và <code>grid-column-end</code>, cậu có thể đang nghĩ rằng giá trị kết thúc sẽ lớn hơn giá trị bắt đầu. Tuy nhiên dưới đây là một trường hợp ngược lại!</p><p>Hãy thử gán <code>grid-column-end</code> với một giá trị nhỏ hơn 5 để tưới nước cho cà-rốt của mình.</p>',
      'ar': '<p> عند استخدام الخاصيتين معا, <code>grid-column-start</code> و <code>grid-column-end</code>, قد تفرض ان قيمة النهاية يجب ان تكون اكبر من قيمة البداية. لكن الحال مختلف, في الواقع يمكن لقيمة البداية ان تكون اكبر من النهاية</p><p>جرب تعيين <code>grid-column-end</code> لقيمة اقل من خمسة لري الجزر الخاص بك.</p>',
      'fi': '<p>Kun määrität sekä <code>grid-column-start</code>- että <code>grid-column-end</code>-ominaisuuden, voisi luulla, että lopetusarvon on oltava suurempi kuin aloitusarvo. Mutta ei!</p><p>Kokeile, mitä tapahtuu, kun määrität <code>grid-column-end</code>-ominaisuuden arvoksi luvun, joka on pienempi kuin 5.</p>',
      'hu': '<p>A <code>grid-column-start</code> és <code>grid-column-end</code> párost használva azt gondolhatnád, hogy a végérték (...-end) nagyobb kell legyen a kezdőértéknél (...-start). Azonban nem ez a helyzet!</p><p>Próbál úgy megöntözni a répáid, hogy a <code>grid-column-end</code> értékét ötnél kisebbre állítod!</p>',
      'id': '<p>Saat memasangkan <code>grid-column-start</code> dan <code>grid-column-end</code>, kamu mungkin berasumsi bahwa nilai akhir lebih besar dari nilai awal. Tapi ternyata tidak demikian!</p><p>Coba mengatur <code>grid-column-end</code> ke nilai yang kurang dari 5 untuk menyiram wortelmu.</p>',
      'tl': '<p>\'Pag pinagsama ang <code>grid-column-start</code> at <code>grid-column-end</code>, siguro naiisip mo na kailangang mas malaki lagi ang huling value kaysa unang value. Pero hindi pala laging gan\'to!</p><p>Subukan mo gawing mas maliit sa 5 ang value ng <code>grid-column-end</code> para diligan ang mga karot mo.</p>',
      'al': '<p>Kur kombinojmë <code>grid-column-start</code> dhe <code>grid-column-end</code>, ju mund të supozoni se vlera e fundit do të jetë më e madhe se vlera e fillimit. Por nuk është kështu!</p><p>Provoni ti vendosni <code>grid-column-end</code> një vlerë më pak se 5 për të ujitur karotat.</p>',
    },
    board: 'c',
    classes: {'#garden > *, #plants > *': 'grid-column-start-5'},
    selector: '> :nth-child(1)',
    style: {'grid-column-end': '2'},
    before: "#garden {\n  display: grid;\n  grid-template-columns: 20% 20% 20% 20% 20%;\n  grid-template-rows: 20% 20% 20% 20% 20%;\n}\n\n#water {\n  grid-column-start: 5;\n",
    after: "}"
  },
  {
    name: 'grid-column-end 3',
    instructions: {
      'en': '<p>If you want to count grid lines from the right instead of the left, you can give <code>grid-column-start</code> and <code>grid-column-end</code> negative values. For example, you can set it to -1 to specify the first grid line from the right.</p><p>Try setting <code>grid-column-end</code> to a negative value.</p>',
      'lv': '<p>Ja gadījumā vēlies skaitīt "grid" līnijas no labas puses uz kreisu, tad <code>grid-column-start</code> un <code>grid-column-end</code> piešķir negatīvas vērtības. Piemēram, piešķirot -1 šai vērtībai, norādīsi uz pirmo "grid" līniju no labās puses.</p><p>Pamēģini piešķirt <code>grid-column-end</code> negatīvu vērtību.</p>',
      'ro': '<p>Dacă vrei să numeri liniile gridului de la dreapta în loc de stânga, poți să le dai <code>grid-column-start</code> și <code>grid-column-end</code> valori negative. De exemplu, poți să le setezi -1 pentru a specifica prima linie a gridului din dreapta.</p><p>Încearcă să setezi <code>grid-column-end</code> la o valoare negativă.</p>',
      'zh-cn': '<p>如果你想要从右边数网格的列数而不是从左边数，你可以设置<code>grid-column-start</code>和<code>grid-column-end</code>为负值。比如说，你可以设置它为-1来指定为右边的第一列。</p><p>尝试将<code>grid-column-end</code>设置为负值。</p>',
      'zh-tw': '<p>如果你想要從右邊數網格的行數而不是從左邊數，你可以設置 <code>grid-column-start</code> 和 <code>grid-column-end</code> 為負值。比如說，你可以設置它為 -1 來指定為右邊的第一行。</p><p>嘗試將 <code>grid-column-end</code> 設置為負值。</p>',
      'tr': 'Grid çizgilerini soldan değil, sağdan saymak istiyorsanız, <code>grid-column-start</code> ve <code>grid-column-end</code> özelliklerine negatif değer verebilirisiniz. Örneğin değeri -1 yaparak, sağdan ilk grid çizgisini belirtebilirisiniz.</p><p> <code>grid-column-end</code> özelliğine negatif bir değer eklemeyi deneyin.</p>',
      'fr': '<p>Si vous souhaitez compter les lignes de la grille à partir de la droite plutôt que de la gauche, vous pouvez donner des valeurs négatives à <code>grid-column-start</code> et à <code>grid-column-end</code>. Par exemple, vous pouvez le définir à -1 pour spécifier la première ligne de la grille en partant de la droite.</p><p>Essayez de définir <code>grid-column-end</code> avec une valeur négative.</p>',
      'de': '<p>Falls du die Rasterlinien von rechts statt von links zählen willst, kannst du für <code>grid-column-start</code> und <code>grid-column-end</code> negative Werte einstellen. Du kannst sie zum Beispiel auf -1 setzen um die erste Rasterlinie von rechts anzusprechen.</p><p>Versuche, <code>grid-column-end</code> auf einen negativen Wert zu setzen.</p>',
      'nl': '<p>Als je gridlijnen vanaf rechts in plaats van links wilt tellen, kan je <code>grid-column-start</code> en <code>grid-column-end</code> negatieve waardes geven. Je kan hem bijvoorbeelds op -1 zetten om de eerste gridlijn vanaf rechts aan te spreken.</p><p>Probeer <code>grid-column-end</code> een negatieve waarde te geven.</p>',
      'pt-br': '<p>Se você deseja contas as linhas da grade a partir da direita ao invés da esquerda, você pode dar a <code>grid-column-start</code> e <code>grid-column-end</code> valores negativos. Por exemplo, você pode definir -1 para especificar a primeira linha da grade a partir da direita.</p><p>Tente definir um valor negativo para <code>grid-column-end</code>.</p>',
      'ru': '<p>Если вы хотите посчитать grid-строки справа налево вместо слева направо, вы можете задать <code>grid-column-start</code> и <code>grid-column-end</code> отрицательные значения. Например, вы можете присвоить значение, равное <code>-1</code>, чтобы указать первую grid-строку начиная справа.</p><p>Попробуйте присвоить <code>grid-column-end</code> отрицательное значение.</p>',
      'pl': '<p>Jeżeli chcesz liczyć linie od prawej zamiast od lewej, możesz ustawić wartości <code>grid-column-start</code> i <code>grid-column-end</code> na negatywne. Na przykład, możesz ustawić wartość na -1 aby wybrać pierwszą linię od prawej.</p><p>Spróbuj ustawić <code>grid-column-end</code> na negatywną wartość.</p>',
      'es': '<p>Si prefieres contar las líneas de la cuadrícula comenzando por la derecha, puedes dar a <code>grid-column-start</code> y <code>grid-column-end</code> valores negativos. Por ejemplo, puedes establecerlos a -1 para indicar la primera línea comenzando por la derecha.</p><p>Intenta establecer <code>grid-column-end</code> a un valor negativo.</p>',
      'sv': '<p>Ifall du vill räkna gridlinjer från höger istället för vänster kan du använda negativa värden för <code>grid-column-start</code> och <code>grid-column-end</code>.</p><p>Försök sätta <code>grid-column-end</code> till ett negativt värde.',
      'fa': '<p>اگر می خواهید خطوط گرید را به جای چپ از راست بشمارید, می توانید به  <code>grid-column-start</code> و <code>grid-column-end</code> مقدار منفی بدهید. برای مثال, برای مشخص کردن اولین خط گرید از راست می توانید به آن 1- بدهید.</p><p>این بار به <code>grid-column-end</code> یک مقدار منفی بدهید.</p>',
      'it': '<p>Se vuoi puoi contare le linee della griglia da destra verso sinistra e puoi assegnare valori negativi a <code>grid-column-start</code> e <code>grid-column-end</code>. Per esempio, puoi assegnare -1 come limite destro della griglia.</p><p>Ora prova ad impostare un valore negativo a <code>grid-column-end</code>.</p>',
      'ko': '<p>그리드 왼쪽의 기준이 아닌 오른쪽으로 기준을 하고싶다면, <code>grid-column-start</code> 와 <code>grid-column-end</code>를 음수로 설정하시면 됩니다. 예를들어, -1로 오른쪽 첫뻔재 세로선을 지정하실 수 있습니다.</p><p><code>grid-column-end</code>를 음수로 설정해보세요.</p>',
      'el': '<p>Αν θέλετε να μετρήσετε γραμμές πλέγματος από τα δεξιά αντί από τα αριστερά, μπορείτε να δώσετε αρνητικές αξίες στο <code>grid-column-start</code> και <code>grid-column-end</code>. Λόγου χάρη, μπορείτε να το ορίσετε σε -1 για να προσδιορίσετε την πρώτη γραμμή πλέγματος από τα δεξιά.</p><p>Δοκιμάστε να ορίσετε το <code>grid-column-end</code> σε μία αρνητική αξία.</p>',
      'ja': '<p>グリッドの線を左ではなく右から数えたくなった時は、<code>grid-column-start</code> と <code>grid-column-end</code> に負の値を設定できます。たとえば、-1 にセットすれば、右端から数えて1番目のグリッドラインを指定できます。</p><p>実際に <code>grid-column-end</code> に負の値を設定してみてください。</p>',
      'ua': '<p>Якщо ви хочете порахувати grid рядки справа наліво замість зліва направо, ви можете надати <code>grid-column-start</code> і <code>grid-column-end</code> від\'ємні значення. Наприклад, ви можете надати значення рівне -1, щоб вказати 1-й grid рядок, починаючи справа.</p><p>Спробуйте надати <code>grid-column-end</code> від\'ємне значення.</p>',
      'no': '<p>Hvis du vil telle rutelinjene fra høyre i stedet for fra venstre, kan du gi <code>grid-column-start</code> og <code>grid-column-end</code> negative verdier. Du kan for eksempel skrive -1 for å spesifisere den første rutelinjen fra høyre.</p><p>Prøv å gi <code>grid-column-end</code> en negativ verdi.</p>',
      'pt-pt': '<p>Se quiseres contar as linhas da grelha começando da direita ao invés da esquerda, podes atribuir valores negativos a <code>grid-column-start</code> e <code>grid-column-end</code>. Por exemplo, podes indicar -1 para especificar a primeira linha da grelha desde a direita.</p><p>Experimenta atribuir um valor negativo a <code>grid-column-end</code>.</p>',
      'bg': '<p>Ако искате да броите grid-линиите от дясно наляво, може да дадете на <code>grid-column-start</code> и <code>grid-column-end</code> отрицателни стойности. Например, стойността -1 ще отговаря на 1-вата grid-линия от дясно наляво.</p><p>Пробвайте да зададете негативна стойност на <code>grid-column-end</code>.</p>',
      'ca': '<p>Si prefereixes comptar les línies de la quadrícula començant per la dreta, pots passar a <code>grid-column-start</code> i <code>grid-column-end</code> valors negatius. Per exemple, pots establir-ho a -1 per indicar la primera línia començant per la dreta.</p><p>Intenta establir <code>grid-column-end</code> a un valor negatiu.</p>',
      'vi': '<p>Nếu cậu muốn tính các dòng của grid từ phải sang thay vì trái sang, cậu có thể gán cho <code>grid-column-start</code> và <code>grid-column-end</code> giá trị âm. Ví dụ, cậu có thể gán giá trị -1 để qui định dòng đó là dòng đầu tiên tính từ phải sang.</p><p>Nào! Bây giờ hãy thử gán cho <code>grid-column-end</code> bằng một giá trị âm.</p>',
      'ar': '<p>اذا كنت ترغب في حساب خطوط الشبكة من اليمين بدلا من اليسار, فيمكنك اعطاء <code>grid-column-start</code> و <code>grid-column-end</code> قيم سلبية. مثال, يمكنك تعيينه على -1 لتحديد خط الجريد الاول من اليمين.</p><p>حاول تعيين <code>grid-column-end</code> الى قيمة سلبية.</p>',
      'fi': '<p>Jos haluat laskea ruudukkoviivat oikealta alkaen, voit määrittää ominaisuuksille <code>grid-column-start</code> ja <code>grid-column-end</code> negatiiviset arvot. Voit määrittää arvoksi esimerkiksi -1 eli ensimmäisen pystyviivan oikealta.</p><p>Kokeile määrittää <code>grid-column-end</code>-ominaisuudelle negatiivinen arvo.</p>',
      'hu': '<p>Ha a rácsvonalakat bal helyett jobbról akarod számlálni, adhatsz negatív értéket a <code>grid-column-start</code> és <code>grid-column-end</code> tulajdonságoknak. Például hivatkozhatsz -1-gyel a jobb első rácsvonalra.</p><p>Próbáld meg negatívra állítani a <code>grid-column-end</code> értékét!</p>',
      'id': '<p>Jika kamu ingin menghitung garis grid dari kanan bukannya dari kiri, kamu bisa memberi <code>grid-column-start</code> dan <code>grid-column-end</code> nilai negatif. Sebagai contoh, kamu bisa memasangnya menjadi -1 untuk menentukan garis grid pertama dari kanan.</p><p>Coba atur <code>grid-column-end</code> ke nilai negatif.</p>',
      'tl': '<p>Kung gusto mo bilangin ang mga linya ng grid mula sa kanan imbes na sa kaliwa, pwede mo gawing negative ang values ng <code>grid-column-start</code> at <code>grid-column-end</code>. Halimbawa, pwede mo ito gawing -1 para i-specify ang simulang linya sa grid mula sa kanan.</p><p>Subukan mong gawing negative ang value ng <code>grid-column-end</code>.</p>',
      'al': '<p>Nëse doni të numëroni vijat e grid nga e djathta dhe jo nga e majta, ju mund ti jepni <code>grid-column-start</code> dhe <code>grid-column-end</code> vlera negative. Për shembull, ju mund ta vendosni në -1 për të specifikuar vijën e parë nga e djathta.</p><p>Provoni të vendosni <code>grid-column-end</code> në një vlerë negative.</p>',
    },
    board: 'c',
    classes: {'#garden > *, #plants > *': 'grid-column-start-1'},
    selector: '> :nth-child(1)',
    style: {'grid-column-end': '-2'},
    before: "#garden {\n  display: grid;\n  grid-template-columns: 20% 20% 20% 20% 20%;\n  grid-template-rows: 20% 20% 20% 20% 20%;\n}\n\n#water {\n  grid-column-start: 1;\n",
    after: "}"
  },
  {
    name: 'grid-column-start 3',
    instructions: {
      'en': '<p>Now try setting <code>grid-column-start</code> to a negative value.</p>',
      'lv': '<p>Tagad pamēģini piešķirt <code>grid-column-start</code> negatīvu vērtību.</p>',
      'ro': '<p>Acum încearcă să setezi <code>grid-column-start</code> la o valoare negativă.</p>',
      'zh-cn': '<p>现在尝试设置<code>grid-column-start</code>为负值。</p>',
      'zh-tw': '<p>現在嘗試設置 <code>grid-column-start</code> 為負值。</p>',
      'tr': '<p>Şimdi <code>grid-column-start</code> özelliğine negatif bir değer verin.</p>',
      'fr': '<p>Maintenant essayez de définir <code>grid-column-start</code> avec une valeur négative.</p>',
      'de': '<p>Versuche nun, <code>grid-column-start</code> auf einen negativen Wert zu setzen.</p>',
      'nl': '<p>Probeer nu <code>grid-column-start</code> een negatieve waarde te geven.</p>',
      'pt-br': '<p>Agora tente definir <code>grid-column-start</code> com um valor negativo.</p>',
      'ru': '<p>Теперь попробуйте присвоить <code>grid-column-start</code> отрицательное значение.</p>',
      'pl': '<p>Teraz spróbuj ustawić <code>grid-column-start</code> na negatywną wartość.</p>',
      'es': '<p>Ahora intenta establecer <code>grid-column-start</code> a un valor negativo.</p>',
      'sv': '<p>Testa nu att sätta <code>grid-column-start</code> till ett negativt värde.</p>',
      'fa': '<p>حالا به <code>grid-column-start</code> مقدار منفی بدهید.</p>',
      'it': '<p>Ora prova ad impostare un valore negativo a <code>grid-column-start</code>.</p>',
      'ko': '<p>이번에는 <code>grid-column-start</code>를 음수로 설정해보세요.</p>',
      'el': '<p>Τώρα δοκιμάστε να ορίσετε το <code>grid-column-start</code> σε μία αρνητική αξία.</p>',
      'ja': '<p>次は <code>grid-column-start</code> に負の値を設定してみましょう。</p>',
      'ua': '<p>Тепер спробуйте привласнити <code>grid-column-start</code> від\'ємне значення.</p>',
      'no': '<p>Prøv nå å gi <code>grid-column-start</code> en negativ verdi.</p>',
      'pt-pt': '<p>Agora experimenta estabelecer <code>grid-column-start</code> com um valor negativo.</p>',
      'bg': '<p>Сега пробвайте да зададете негативна стойност на <code>grid-column-start</code>.</p>',
      'ca': '<p>Ara intenta passar un valor negatiu a <code>grid-column-start</code>.</p>',
      'vi': '<p>Hãy thử gán cho <code>grid-column-start</code> một giá trị âm.</p>',
      'ar': '<p>والان جرب تعيين <code>grid-column-start</code> الى قيمة سلبية</p>',
      'fi': '<p>Määritä nyt <code>grid-column-start</code>-ominaisuudelle negatiivinen arvo.</p>',
      'hu': '<p>Most próbáld meg a <code>grid-column-start</code> értékét is negatívra állítani!</p>',
      'id': '<p>Sekara coba atur <code>grid-column-start</code> ke nilai negatif.</p>',
      'tl': '<p>Tapos subukan mo naman gawing negative ang value ng <code>grid-column-start</code>.</p>',
      'al': '<p>Tani provoni të vendosni <code>grid-column-start</code> në një vlerë negative.</p>',
    },
    board: 'w',
    selector: '> :nth-child(1)',
    style: {'grid-column-start': '-3'},
    before: "#garden {\n  display: grid;\n  grid-template-columns: 20% 20% 20% 20% 20%;\n  grid-template-rows: 20% 20% 20% 20% 20%;\n}\n\n#poison {\n",
    after: "}"
  },
  {
    name: 'grid-column-end 4',
    instructions: {
      'en': '<p>Instead of defining a grid item based on the start and end positions of the grid lines, you can define it based on your desired column width using the <code>span</code> keyword. Keep in mind that <code>span</code> only works with positive values.</p><p>For example, water these carrots with the rule <code>grid-column-end: span 2;</code>.</p>',
      'lv': '<p>Tā vietā, lai definētu "grid" elementu balstoties uz "grid" līniju sākuma un beigu pozīcijām, tu vari to definēt balstoties uz vēlamo kolonnu platumu. Lai to panāktu, pievieno kodam : <code>span</code>. Atceries, ka <code>span</code> darbojas tikai ar pozitīvām vērtībām</p><p>Piemēram, pamēģini apliekt šos burkānos lietojot <code>grid-column-end: span 2;</code>.</p>',
      'ro': '<p>În loc să definești un element al gridului bazându-te pe pozițiile de început și de sfârșit, poți să le definești bazându-te pe lățimea dorită a coloanei folosind cuvântul cheie <code>span</code>. Ține minte că <code>span</code> funcționează doar cu valori pozitive.</p><p>De exemplu, udă acești morcovi cu proprietatea <code>grid-column-end: span 2;</code>.</p>',
      'zh-cn': '<p>你可以根据网格的开始和结束位置来定义一个网格项，你也可以用<code>span</code>关键词来指定你所要跨越的宽度。请注意<code>span</code>只能是正值。</p><p>比如说，你可以通过<code>grid-column-end: span 2;</code>来给这些胡萝卜浇水。</p>',
      'zh-tw': '<p>你可以根據網格的開始和結束位置來定義一個網格項，你也可以用 <code>span</code> 關鍵詞來指定你所要跨越的寬度。請注意 <code>span</code> 只能是正值。</p><p>比如說，你可以通過 <code>grid-column-end: span 2;</code> 來給這些胡蘿蔔澆水。</p>',
      'tr': '<p>Grid çizgilerinin başlangıç ve bitiş konumlarına dayalı olarak bir grid öğesi tanımlamak yerine, <code>span</code> anahtar kelimesini kullanarak, onu istediğiniz sütun genişliğine göre tanımlayabilirsiniz. <code>span</code> özelliğinin sadece pozitif değerler ile çalıştığını unutmayın.</p><p>Örneğin, havuçları bu kural ile sulamayı deneyin: <code>grid-column-end: span 2;</code>.</p>',
      'fr': '<p>Au lieu de définir un élément de la grille basé sur les positions de début et de fin des lignes de la grille, vous pouvez le définir en fonction de la largeur de colonne désirée à l\'aide du mot clé <code>span</code>. Gardez à l\'esprit que <code>span</code> fonctionne uniquement avec des valeurs positives.</p><p>Par exemple, arrosez ces carottes avec la règle <code>grid-column-end: span 2;</code>.</p>',
      'de': '<p>Anstatt ein Rasterelement basierend auf Start- und Endposition der Rasterlinien zu definieren, kannst du es anhand der gewünschten Spaltenbreite mit dem Schlüsselwort <code>span</code> definieren. Denk daran, dass <code>span</code> nur mit positiven Werten funktioniert.</p><p>Wässere zum Beispiel diese Karotten mit der Regel <code>grid-column-end: span 2;</code>.</p>',
      'nl': '<p>In plaats van een grid item te definiëren op basis van de start- en eindposities van de gridlijnen, kan je hem definiëren op basis van het aantal kolommen dat je wilt invullen, door het <code>span</code>-sleutelwoord te gebruiken. Onthoud dat <code>span</code> alleen werkt met positieve waardes.</p><p>Geef bijvoorbeeld deze planten water met de regel <code>grid-column-end: span 2;</code>.</p>',
      'pt-br': '<p>Ao invés de definir uma grade baseada no início e final das posições das linhas na grade, você pode defini-las baseado na largura da coluna desejada usando a palavra-chave <code>span</code>. Mantenha em mente que <code>span</code> apenas funciona com valores positivos.</p><p>Por exemplo, irrigue essas cenouras com a regra <code>grid-column-end: span 2;</code>.</p>',
      'ru': '<p>Вместо определения grid-элемента на основе начальной и конечной позиции grid-строк вы можете задавать их с помощью необходимой вам ширины строк, используя <code>span</code>. Помните, что <code>span</code> работает только с положительными значениями.</p><p>Для примера, полейте эту морковь, используя свойство <code>grid-column-end: span 2</code>.</p>',
      'pl': '<p>Zamiast definiować element na podstawie początkowej i końcowej linii, możesz go zdefiniować na podstawie pożądanej szerokości z użyciem słowa kluczowego <code>span</code>. Miej na uwadze, że <code>span</code> działa tylko z pozytywnymi wartościami.</p><p>Na przykład, podlej te marchewki poleceniem <code>grid-column-end: span 2;</code>.</p>',
      'es': '<p>En lugar de definir un elemento en la cuadrícula basado en la posicion inicial y final, puedes definirlo basado en la longitud de columnas deseada usando la palabra clave <code>span</code>. Ten presente que <code>span</code> solo funciona con valores positivos.</p><p>Por ejemplo, riega las zanahorias usando <code>grid-column-end: span 2;</code>.</p>',
      'sv': '<p>Istället för att definiera ett grid element baserat på start- och slutvärden kan man definiera det baserat på önskad kolumnbredd genom att sätta <code>span</code>. Kom ihåg att <code>span</code> dock bara fungerar med positiva värden.</p><p>Till exempel, vattna dom här morötterna med <code>grid-column-end: span 2;</code>.</p>',
      'fa': '<p>شما می توانید به جای تعریف گرید بر اساس موقعیت شروع و پایان خطوط گرید, با استفاده از کلمه کلیدی <code>span</code> آن را بر اساس عرض ستون تعریف کنید. توجه کنید که <code>span</code> فقط با مقادیر مثبت کار می کند.</p><p>برای مثال, این هویج ها را با دستور <code>;grid-column-end: span 2</code> آبیاری کنید.</p>',
      'it': '<p>Invece di definire un elemento della griglia usando un intervallo, tramite le posizioni start e end, puoi definire il numero desiderato di colonne occupate tramite la keyword <code>span</code>. Tieni presente però che <code>span</code> funziona solo con valori positivi.</p><p>Per esempio, innaffia queste carote utilizzando <code>grid-column-end: span 2;</code>.</p>',
      'ko': '<p>그리드 선의 시작과 끝 위치를 기준으로 그리드 항목을 정의하는 대신, <code>span</code>을 이용하여 열(column)의 넓이를 지정할 수 있습니다. <code>span</code>은 양수만 설정 가능합니다.</p><p>예를 들어, <code>grid-column-end: span 2;</code>와 같이 당근에 물을 주십시오.</p>',
      'el': '<p>Αντί να προσδιορίσετε ένα αντικείμενο πλέγματος βάσει των αρχικών και τελικών θέσεων των γραμμών του πλέγματος, μπορείτε να το προσδιορίσετε βάσει του επιθυμητού μήκους της στήλης χρησιμοποιώντας την λέξη-κλειδί <code>span</code>. Έχετε υπόψη σας ότι το <code>span</code> λειτουργεί μόνο με θετικές αξίες.</p><p>Λόγου χάρη, ποτίστε αυτά τα καρότα με τον κανόνα <code>grid-column-end: span 2;</code>.</p>',
      'ja': '<p>グリッドラインの最初と最後の位置を指定してグリッドアイテムを定義する代わりに、好きな列の幅を <code>span</code> というキーワードを使って定義することもできます。<code>span</code> には正の値しか使えないので注意してください。</p><p>たとえば、これらのニンジンに水をやるには <code>grid-column-end: span 2;</code> と書きます。</p>',
      'ua': '<p>Замість визначення grid елемента базуючись на початковій і кінцевій позиціях grid рядків, ви можете визначати їх за допомогою необхідної вам широти рядків, використовуючи <code>span</code>. Пам\'ятайте, що <code>span</code> працює тільки з позитивними значеннями.</p><p>Для прикладу, полийте цю моркву використовуючи свойсво <code>grid-column-end: span 2;</code>.</p>',
      'no': '<p>I stedet for å definere et gridelement basert på start- og sluttposisjonene til rutelinjene, kan du heller definere det basert på ønsket kolonnebredde ved å bruke egenskapen <code>span</code>. Husk at <code>span</code> kun fungerer med positive verdier.</p><p>For eksempel, vann disse gulrøttene med egenskapen og verdien <code>grid-column-end: span 2;</code>.</p>',
      'pt-pt': '<p>Em vez de definires um elemento da grelha baseado nas posições iniciais e finais das linhas, podes defini-lo com base numa largura de coluna desejada, através da palavra-chave <code>span</code>. Tem presente que <code>span</code> apenas funciona com valores positivos.</p><p>Por exemplo, rega estas cenouras com a regra <code>grid-column-end: span 2;</code>.</p>',
      'bg': '<p>Вместо да дефинирате grid-елемент според начална и крайна позиция на grid-линиите, може да го направите базирано на желаната широчина на колоната, използвайки ключовата дума <code>span</code>. Не забравяйте, че <code>span</code> работи само с положителни числа.</p><p>Например, полейте тези моркови, използвайки <code>grid-column-end: span 2;</code>.</p>',
      'ca': '<p>En lloc de definir un element a la quadrícula basat en la posició inicial i final, pots definir-lo basat en la longitud de columnes desitjada utilitzant la paraula clau <code>span</code>. Tingues present però, que <code>span</code> només funciona amb valors positius.</p><p>Per exemple, rega les pastanagues utilitzant <code>grid-column-end: span 2;</code>.</p>',
      'vi': '<p>Thay vì định nghĩa một đối tượng grid bằng việc xác định vị trí bắt đầu và kết thúc của các dòng, cậu có thể định nghĩa số cột bằng từ khóa <code>span</code>. Hãy nhớ rằng <code>span</code> chỉ hoạt động với các giá trị dương.</p><p>Ví dụ, cà-rốt sẽ được tưới nước với <code>grid-column-end: span 2;</code>.</p>',
      'ar': '<p>بدلا من تحديد العنصر بناءً على مكان بداية ونهاية خطوط الشبكة, يمكنك تحديده بناءٍ على عرض العمود المطلوب باستخدام كلمة <code>span</code>. ضع في اعتبارك ان <code>span</code> تعمل فقط مع القيم الموجبة.</p><p>على سبيل المثال, قم بري الجذر باستخدام القاعدة <code>grid-column-end: span 2;</code>. </p>',
      'fi': '<p>Sen sijaan, että määrität ruudukkoelementin aloitus- ja lopetusviivan mukaan, voit määrittää sen haluamasi sarakeleveyden mukaan <code>span</code>-avainsanan avulla. Muista, että <code>span</code> toimii vain positiivisilla luvuilla.</p><p>Kastele esimerkiksi nämä porkkanat määrittämällä <code>grid-column-end: span 2;</code>.</p>',
      'hu': '<p>Ahelyett, hogy a rácselemeket a kezdő- és végrácsvonal pozíciójának alapján határoznánk meg, megadhatjuk őket a kívánt oszlopszélességet alapul véve is, a <code>span</code>  kulcsszó használatával. Ne feledd, hogy a <code>span</code> csak pozitív értékkel működik!</p><p>Például megöntözheted ezeket a répákat a <code>grid-column-end: span 2;</code> szabályt használva.</p>',
      'id': '<p>Alih-alih mendefinisikan item grid berdasarkan posisi awal dan akhir garis grid, kamu bisa mendefinisikannya berdasarkan lebar kolom yang diinginkan dengan menggunakan kata kunci <code>span</code>. Ingatlah bahwa <code>span</code> hanya bekerja dengan nilai positif.</p><p>Sebagai contoh, siram wortel-wortel ini dengan aturan <code>grid-column-end: span 2;</code>.</p>',
      'tl': '<p>Kaysa i-define mo base sa una at dulong position ng mga grid line ang grid item, pwede mo itong i-define sa gusto mong width ng column gamit ang keyword na <code>span</code>. Tandaan mo na ang <code>span</code> ay gagana lang kapag positive ang value nito.</p><p>Halimbawa, diligan mo itong mga karot gamit ang rule <code>grid-column-end: span 2;</code>.</p>',
      'al': '<p>Ndyshe nga deklarimi i një grid item duke u bazuar në fillimin dhe mbarimin e vijave të grid, ju mund ta deklaroni duke u bazuar në gjerësine e dëshiruar të kolonës duke përdorur <code>span</code>. Kini parasysh se <code>span</code> funksionon vetëm me vlera negative.</p><p>Për shembull, ujisni këto karota me rregullin <code>grid-column-end: span 2;</code>.</p>',
    },
    board: 'c',
    classes: {'#garden > *, #plants > *': 'grid-column-start-2'},
    selector: '> :nth-child(1)',
    style: {'grid-column-end': 'span 2'},
    before: "#garden {\n  display: grid;\n  grid-template-columns: 20% 20% 20% 20% 20%;\n  grid-template-rows: 20% 20% 20% 20% 20%;\n}\n\n#water {\n  grid-column-start: 2;\n",
    after: "}"
  },
  {
    name: 'grid-column-end 5',
    instructions: {
      'en': '<p>Try using <code>grid-column-end</code> with the <code>span</code> keyword again to water your carrots.</p>',
      'lv': '<p>Šoreiz, aplejot savu burkānu dārzu, pamēģini pielietot <code>grid-column-end</code> kopā ar <code>span</code>.</p>',
      'ro': '<p>Încearcă să folosești <code>grid-column-end</code> cu <code>span</code> din nou pentru a uda morcovii.</p>',
      'zh-cn': '<p>尝试在<code>grid-column-end</code>属性中使用<code>span</code>关键字来给胡萝卜浇水。</p>',
      'zh-tw': '<p>嘗試在 <code>grid-column-end</code> 屬性中使用 <code>span</code> 關鍵字來給胡蘿蔔澆水。</p>',
      'tr': '<p>Havuçlarınızı suya koymak için <code>span</code> anahtar kelimesini tekrar <code>grid-column-end</code> ile kullanmayı deneyin.</p> ',
      'fr': '<p>Essayer l\'utilisation de <code>grid-column-end</code> avec encore le mot clé <code>span</code> pour arroser vos carottes.</p>',
      'de': '<p>Versuche, <code>grid-column-end</code> wieder mit dem Schlüsselwort <code>span</code> einzusetzen, um deine Karotten zu wässern.</p>',
      'nl': '<p>Probeer <code>grid-column-end</code> opnieuw met het sleutelwoord <code>span</code> in te vullen om je wortels water te geven.</p>',
      'pt-br': '<p>Tente usar <code>grid-column-end</code> com a palavra-chave <code>span</code> novamente para irrigar suas cenouras.</p>',
      'ru': '<p>Попробуйте опять использовать <code>grid-column-end</code> вместе со <code>span</code>, чтобы полить морковь.</p>',
      'pl': '<p>Spróbuj użyć ponownie <code>grid-column-end</code> z słowem kluczowym <code>span</code>, aby podlać swoje marchewki.</p>',
      'es': '<p>Intenta usar <code>grid-column-end</code> con la palabra clave <code>span</code> de nuevo para regar tus zanahorias.</p>',
      'sv': '<p>Testa använda <code>grid-column-end</code> med <code>span</code> igen för att vattna dina morötter.</p>',
      'fa': '<p> دوباره از <code>grid-column-end</code> به همراه کلمه کلیدی <code>span</code> برای آبیاری هویج ها استفاده کنید.</p>',
      'it': '<p>Prova ad usare <code>span</code> con <code>grid-column-end</code> per innaffiare tutte le carote.</p>',
      'ko': '<p>다시한번 <code>grid-column-end</code>에 <code>span</code>을 이용하여 당근에 물을 주십시오.</p>',
      'el': '<p>Δοκιμάστε να χρησιμοποιήσετε το <code>grid-column-end</code> ξανά με την λέξη-κλειδί <code>span</code> για να ποτίσετε τα καρότα σας.</p>',
      'ja': '<p>もう一度 <code>grid-column-end</code> で <code>span</code> キーワードを使ってニンジンに水をやってみてください。</p>',
      'ua': '<p>Спробуй знову використовувати <code>grid-column-end</code> разом з <code>span</code> для того, щоб полити вашу моркву.</p>',
      'no': '<p>Prøv å bruke <code>grid-column-end</code> med verdien <code>span</code> en gang til for å vanne gulrøttene dine.</p>',
      'pt-pt': '<p>Tenta utilizar a propriedade <code>grid-column-end</code> com a palavra-chave <code>span</code> novamente para regar as tuas cenouras.</p>',
      'bg': '<p>Опитайте да използвате <code>grid-column-end</code> заедно с ключовата дума <code>span</code> отново, за да полеете Вашите моркови.</p>',
      'ca': '<p>Intenta utilitzar <code>grid-column-end</code> amb la paraula clau <code>span</code> un altre cop per regar les pastanagues.</p>',
      'vi': '<p>Hãy thử dùng <code>grid-column-end</code> với từ khóa <code>span</code> để tưới nước cho cà-rốt một lần nữa nhé.</p>',
      'ar': '<p>جرب استخدام <code>grid-column-end</code> مع كلمة <code>span</code> مرى اخرى لري الجزر الخاص بك</p>',
      'fi': '<p>Kokeile kastella porkkanat antamalla <code>grid-column-end</code>-ominaisuudelle taas avainsana <code>span</code>.</p>',
      'hu': '<p>Próbáld meg ismét megöntözni a répáid a <code>grid-column-end</code> és a <code>span</code> kulcsszót használva!</p>',
      'id': '<p>Coba gunakan <code>grid-column-end</code> dengan kata kunci <code>span</code> lagi untuk menyiram wortelmu.</p>',
      'tl': '<p>Subukan mo ulit gamitin ang <code>grid-column-end</code> kasama ang keyword na <code>span</code> para diligan ang mga karot mo.</p>',
      'al': '<p>Provoni të përdorni <code>grid-column-end</code> bashkë me <code>span</code> përseri për të ujitur karotat tuaja.</p>',
    },
    board: 'c',
    classes: {'#garden > *, #plants > *': 'grid-column-start-1'},
    selector: '> :nth-child(1)',
    style: {'grid-column-end': 'span 5'},
    before: "#garden {\n  display: grid;\n  grid-template-columns: 20% 20% 20% 20% 20%;\n  grid-template-rows: 20% 20% 20% 20% 20%;\n}\n\n#water {\n  grid-column-start: 1;\n",
    after: "}"
  },
  {
    name: 'grid-column-start 4',
    instructions: {
      'en': '<p>You can also use the <code>span</code> keyword with <code>grid-column-start</code> to set your item\'s width relative to the end position.</p>',
      'lv': '<p><code>span</code> vari arī lietot kopā ar <code>grid-column-start</code>. Šādā veidā tu norādīsi elemanta platumu attiecībā pret beigu pozīciju.</p>',
      'ro': '<p>Poți folosi, de asemenea, cuvântul cheie <code>span</code> cu <code>grid-column-start</code> pentru a seta lățimea elementului relativă la poziția de sfârșit.</p>',
      'zh-cn': '<p>你也可以将<code>span</code>关键字和<code>grid-column-start</code>一起使用，相对于结束位置来设置其宽度。</p>',
      'zh-tw': '<p>你也可以將 <code>span</code> 關鍵字和 <code>grid-column-start</code> 一起使用，相對於結束位置來設置其寬度。</p>',
      'tr': '<p>Öğenizin son konumuna göre genişliğini ayarlamak için <code>span</code> anahtar kelimesini <code>grid-column-start</code> ile birlikte de kullanabilirsiniz.</p>',
      'fr': '<p>Vous pouvez également utiliser le mot clé <code>span</code> avec <code>grid-column-start</code> pour définir la largeur de votre élément par rapport à la position de fin.</p>',
      'de': '<p>Du kannst das Schlüsselwort <code>span</code> auch mit <code>grid-column-start</code> verwenden, um die Breite deines Rasterelements relativ zur Endposition anzugeben.</p>',
      'nl': '<p>Je kan ook het <code>span</code>-sleutelwoord gebruiken met <code>grid-column-start</code> om je item’s breedte relatief te maken tot je eindpositie.</p>',
      'pt-br': '<p>Você ainda pode usar a palavra-chave <code>span</code> com <code>grid-column-start</code> para definir a largura do seu item relativo à posição final.</p>',
      'ru': '<p>Вы также можете использовать <code>span</code> вместе с <code>grid-column-start</code>, чтобы присвоить значение ширины grid-элемента относительно конечной позиции.</p>',
      'pl': '<p>Możesz także użyć słowa kluczowego <code>span</code> z <code>grid-column-start</code> aby ustawić szerokość twojego elementu względem końcowej pozycji.</p>',
      'es': '<p>También puedes usar la palabra clave <code>span</code> con <code>grid-column-start</code> para establecer la anchura del elemento en relación a la posición final.</p>',
      'sv': '<p>Du kan också använda <code>span</code> med <code>grid-column-start</code> för att sätta elementets längd relativt till slutvärdet.</p>',
      'fa': '<p>همچنین می توانید از کلمه کلیدی <code>span</code> به همراه <code>grid-column-start</code> برای تنظیم عرض آیتم خود متناسب با موقعیت پایانی استفاده نمایید.</p>',
      'it': '<p>Puoi anche usare <code>span</code> con <code>grid-column-start</code> per impostare la larghezza dell\'elemento relativa alla posizione finale.</p>',
      'ko': '<p>또한 <code>span</code> keyword와 <code>grid-column-start</code>를 이용하여 마지막 위치에서 상대적으로 항목의 넓이를 설정이 가능합니다.</p>',
      'el': '<p>Μπορείτε επίσης να χρησιμοποιήσετε την λέξη-κλειδί <code>span</code> με το <code>grid-column-start</code> για να ορίσετε το μήκος του αντικειμένου σας σε σχέση με την τελική θέση.</p>',
      'ja': '<p><code>span</code> キーワードを <code>grid-column-start</code> で使えば、グリッドアイテムの終了位置までの幅を指定することもできます。</p>',
      'ua': '<p>Ви також можете використовувати <code>span</code> разом з <code>grid-column-start</code> для того, щоб привласнити значення широти вашого grid елемента щодо кінцевої позиції.',
      'no': '<p>Du kan også bruke <code>span</code> med <code>grid-column-start</code> for å gi elementet ditt en bredde som er relativ til sluttposisjonen.</p>',
      'pt-pt': '<p>Também podes utilizar a palavra-chave <code>span</code> com a propriedade <code>grid-column-start</code> para estabelecer a largura do teu elemento relativa à posição final.</p>',
      'bg': '<p>Също така може да използвате ключовата дума <code>span</code> заедно с <code>grid-column-start</code>, за да зададете широчина на елемента релативно на крайната позиция.</p>',
      'ca': '<p>També pots utilitzar la paraula clau <code>span</code> amb <code>grid-column-start</code> per establir l\'amplada de l\'element en relació a la posició final.</p>',
      'vi': '<p>Cậu vẫn có thể sử dụng từ khóa <code>span</code> cho <code>grid-column-start</code> để thiết lập chiều rộng của đối tượng bên trong grid liên quan đến vị trí kết thúc.</p>',
      'ar': '<p>يمكنك ايضاً استخدام كلمة <code>span</code> مع <code>grid-column-start</code> لتعيين عرض العنصر بالنسبة لموضع النهاية. </p>',
      'fi': '<p>Voit käyttää <code>span</code>-avainsanaa myös ominaisuuden <code>grid-column-start</code> kanssa. Tällöin elementin leveys määritetään suhteessa lopetuskohtaan.</p>',
      'hu': '<p>A <code>span</code> kulcsszót a <code>grid-column-start</code> tulajdonsággal együtt arra is használhatod, hogy az elemszélességet a végpozícióhoz viszonyítva állítsd be.</p>',
      'id': '<p>Kamu juga bisa menggunakan kata kunci <code>span</code> dengan <code>grid-column-start</code> untuk mengatur lebar item relatif terhadap posisi akhir.</p>',
      'tl': '<p>Pwede mo rin gamitin ang keyword na <code>span</code> sa <code>grid-column-start</code> para i-set ang width ng mga item mo na relative sa position nito sa dulo.</p>',
      'al': '<p>Ju mund të përdorni gjithashtu <code>span</code> me <code>grid-column-start</code> për të vendosur gjerësine e item\'s relative me pozicionin e fundit.</p>',
    },
    board: 'c',
    classes: {'#garden > *, #plants > *': 'grid-column-end-6'},
    selector: '> :nth-child(1)',
    style: {'grid-column-start': 'span 3'},
    before: "#garden {\n  display: grid;\n  grid-template-columns: 20% 20% 20% 20% 20%;\n  grid-template-rows: 20% 20% 20% 20% 20%;\n}\n\n#water {\n",
    after: "  grid-column-end: 6;\n}"
  },
  {
    name: 'grid-column 1',
    instructions: {
      'en': '<p>Typing both <code>grid-column-start</code> and <code>grid-column-end</code> every time can get tiring. Fortunately, <code>grid-column</code> is a shorthand property that can accept both values at once, separated by a slash.</p><p>For example, <code>grid-column: 2 / 4;</code> will set the grid item to start on the 2nd vertical grid line and end on the 4th grid line.</p>',
      'lv': '<p>Katru reizi no jauna rakstīt <code>grid-column-start</code> un <code>grid-column-end</code> ir ļoti laikietilpīgi un nogurdinoši. Par laimi ir pastāv <code>grid-column</code>, kas ir saīsinājums un pieņem abas vērtības (atdalītas ar slīpsvītru) vienlaicīgi.<p></p>Piemēram <code>grid-column: 2 / 4;</code> tavu "grid" nostādīs sākot no otrās vertikālās "grid" līnijas līdz ceturtajai.</p>',
      'ro': '<p>Scriind <code>grid-column-start</code> și <code>grid-column-end</code> de fiecare dată poate deveni obositor. Din fericire <code>grid-column</code> este o prescurtare care acceptă ambele valori în același timp, separate de un slash.</p><p>De exemplu, <code>grid-column: 2 / 4;</code> va seta elementul gridului la început pe a doua linie verticală a gridului.</p>',
      'zh-cn': '<p>如果每次都输入<code>grid-column-start</code>和<code>grid-column-end</code>两个属性，我们一定会厌烦的。幸运的是，<code>grid-column</code>是一个缩写形式，它可以一次接受两个值，只要用\'/\'分开就好。</p><p>比如说：<code>grid-column: 2 / 4;</code>就会设置网格项从第二列开始，到第四列结束。</p>',
      'zh-tw': '<p>如果每次都輸入 <code>grid-column-start</code> 和 <code>grid-column-end</code> 兩個屬性，我們一定會厭煩的。幸運地是，<code>grid-column</code> 是一個縮寫屬性，它可以一次接受兩個值，只要用 \'/\' 分開就好。</p><p>比如說：<code>grid-column: 2 / 4;</code> 就會設置網格項從第二行開始，到第四行结束。</p>',
      'tr': '<p>Her defasında <code>grid-column-start</code> ve <code>grid-column-end</code> yazmak yorucu olabilir. Neyse ki, <code>grid-column</code> iki değeri de aynı anda taksim işaretini kullanarak kabul eden bir kısayol özelliğidir.</p><p><code>grid-column: 2 / 4;</code> grid öğesini 2. dikey grid çizgisinden başlatıp 4. grid çizgisinde bitirir.</p>',
      'fr': '<p>Taper <code>grid-column-start</code> et <code>grid-column-end</code> à chaque fois peut devenir fatiguant. Heureusement, <code>grid-column</code> est une propriété raccourcie qui peut accepter les deux valeurs à la fois, séparées par un slash.</p><p>Par exemple, <code>grid-column: 2 / 4;</code> définira l\'élément de la grille à partir de la 2ème ligne verticale de la grille et se terminera à la 4ème ligne de la grille.</p>',
      'de': '<p>Jedes Mal <code>grid-column-start</code> und <code>grid-column-end</code> einzutippen kann ermüdend werden. Zum Glück gibt es die Kurzschrift-Eigenschaft <code>grid-column</code>, welche beide Werte auf einmal akzeptiert, getrennt durch einen Schrägstrich.</p><p>Zum Beispiel <code>grid-column: 2 / 4;</code> setzt den Beginn eines Rasterelments auf die zweite vertikale Rasterlinie und das Ende auf die vierte Rasterlinie.</p>',
      'nl': '<p>Elke keer <code>grid-column-start</code> en <code>grid-column-end</code> typen kan vermoeiend zijn. Gelukkig is er <code>grid-column</code>, een shorthand property die beide waardes tegelijk aanneemt, gescheiden door een slash.</p><p>Bijvoorbeeld, <code>grid-column: 2 / 4;</code> laat het griditem starten op de 2e verticale gridlijn en eindigen op de 4e gridlijn.</p>',
      'pt-br': '<p>Digitando ambos <code>grid-column-start</code> e <code>grid-column-end</code> toda vez, pode cansar. Felizmente, <code>grid-column</code> é uma propriedade curta que pode aceitar ambos os valores de uma só vez, separados por uma barra.</p><p>Por exemplo, <code>grid-column: 2 / 4;</code> irá definir o que o item na grade se inicie na 2ª linha vertical e termine na 4ª linha vertical da grade.</p>',
      'ru': '<p>Печатать каждый раз <code>grid-column-start</code> и <code>grid-column-end</code> может быть немного утомительно. К счастью, есть краткая форма <code>grid-column</code>, которая принимает оба значения сразу через косую черту: <code>/</code>.</p><p>Например, <code>grid-column: 2 / 4</code> скажет grid-элементу начаться на второй вертикальной grid-линии и закончиться на четвёртой.</p>',
      'pl': '<p>Wpisywanie obu <code>grid-column-start</code> i <code>grid-column-end</code> za każdym razem, może być męczące. Na szczęście, <code>grid-column</code> jest skróconą właściwością, która akceptuje obie wartości naraz, rozdzielone przez ukośnik.</p><p>Na przykład, <code>grid-column: 2 / 4;</code> ustawi początek elementu na 2 linię pionową, a koniec na 4 linię.</p>',
      'es': '<p>Escribir ambos <code>grid-column-start</code> y <code>grid-column-end</code> cada vez puede resultar cansador. Afortunadamente, <code>grid-column</code> es una propiedad abreviada que acepta ambos valores a la vez, separados por una barra oblicua.</p><p>Por ejemplo, <code>grid-column: 2 / 4;</code> establecerá el comienzo del elemento de la cuadrícula en la 2ª línea vertical de esta, y su final en la 4ª línea vertical.</p>',
      'sv': '<p>Att skriva <code>grid-column-start</code> och <code>grid-column-end</code> varje gång kan bli lite tröttsamt. Därför finns <code>grid-column</code>, en förenklad variant där du kan definiera båda två på en gång separerade med ett slashtecken.</p><p>Till exempel, <code>grid-column: 2 / 4;</code> sätter grid elementet att starta på andra vertikala gridlinjen och sluta på fjärde.</p>',
      'fa': '<p>هر بار تایپ کردن هردوی <code>grid-column-start</code> و <code>grid-column-end</code> خسته کننده است. خوشبختانه, <code>grid-column</code> یک روش کوتاه شده است که می تواند هر دو مقدار را یکجا و به شکل جدا شده با یک اسلش بگیرد.</p><p>برای مثال, <code>;grid-column: 2 / 4</code> آیتم گرید را از خط عمودی دوم گرید شروع و در خط عمودی چهارم گرید تمام می کند.</p>',
      'it': '<p>Può diventare noioso dover indicate tutte le volte sia <code>grid-column-start</code> che <code>grid-column-end</code>. Fortunatamente esiste <code>grid-column</code>, ovvero una versione abbreviata che accetta entrambi i valori, separati da uno slash.</p><p>Per esempio, <code>grid-column: 2 / 4;</code> imposta il valore iniziale alla 2ª linea verticale della griglia e quello finale alla 4ª.</p>',
      'ko': '<p>매번 <code>grid-column-start</code>와 <code>grid-column-end</code>를 입력하는 것은 불편합니다. 다행스럽게, <code>grid-column</code>는 한번에 입력가능한 단축해서 설정으로, /(슬래쉬)로 구분됩니다.</p><p>예를 들면, <code>grid-column: 2 / 4;</code>는 그리드 항목을 두번째 수직선에서 네번째 수직선까지로 설정합니다.</p>',
      'el': '<p>Η πληκτρολόγηση αμφότερων των <code>grid-column-start</code> και <code>grid-column-end</code> κάθε φορά μπορεί να γίνει κουραστική. Ευτυχώς, το <code>grid-column</code> είναι μια συντομογραφική ιδιότητα που μπορεί να δεχθεί και τις δύο αξίες με τη μία, χωριζόμενες από μία κάθετο.</p><p>Λόγου χάρη, το <code>grid-column: 2 / 4;</code> θα ορίσει το αντικείμενο πλέγματος να αρχίζει στην 2η κάθετη γραμμή πλέγματος και να τελειώνει στην 4η.</p>',
      'ja': '<p>毎回 <code>grid-column-start</code> と <code>grid-column-end</code> を両方タイプするのは疲れてしまうかもしれませんね。嬉しいことに、<code>grid-column</code> という短縮プロパティを使えば、2つの値をスラッシュで区切ることで両方とも指定できます。</p><p>たとえば、<code>grid-column: 2 / 4;</code> と書けば、2番目の縦のグリッドラインに始まり、4番目のグリッドラインで終わるようなグリッドアイテムを設定できます。</p>',
      'ua': '<p>Друкувати разом <code>grid-column-start</code> і <code>grid-column-end</code> кожен раз трохи втомлює. На щастя, <code>grid-column</code> є короткою властивістю яке приймає обидва значення відразу через слеш  "/"  .</p><p>Наприклад, <code>grid-column: 2 / 4;</code> скаже grid елементу початися на 2-ій вертикальній grid лінії і закінчитися на 4-ій вертикальній grid лінії.</p>',
      'no': '<p>Det kan bli slitsomt å skrive <code>grid-column-start</code> og <code>grid-column-end</code> hver gang. Heldigvis er <code>grid-column</code> en forkortet egenskap som du kan bruke for å skrive begge verdiene sammen, skilt med en skråstrek.</p><p>For eksempel, <code>grid-column: 2 / 4;</code> forteller gridelementet at det skal starte på den andre vertikale rutelinjen og slutte på den fjerde rutelinjen.</p>',
      'pt-pt': '<p>Escrevendo sempre ambas <code>grid-column-start</code> e <code>grid-column-end</code> pode tornar-se cansativo. Felizmente, <code>grid-column</code> é uma propriedade abreviada que aceita os dois valores de uma só vez, separados por "/".</p><p>Por exemplo, <code>grid-column: 2 / 4;</code> estabelecerá que o elemento comece na 2ª linha vertical da grelha e termine na 4ª linha.</p>',
      'bg': '<p>Писането всеки път на двете свойства <code>grid-column-start</code> и <code>grid-column-end</code> е доста неприятно. За целта може да използвате <code>grid-column</code>. Това свойство приема 2 стойности разделени с наклонена черта и е по-кратък начин за изписването на горните две свойства.</p><p>Например, <code>grid-column: 2 / 4;</code> ще разположи grid-елемента, започвайки от 2-рата колона и завършвайки на 4-тата  grid-линия.</p>',
      'ca': '<p>Escriure ambdos <code>grid-column-start</code> i <code>grid-column-end</code> cada vegada pot resultar cansat. Per sort, <code>grid-column</code> és una propietat abreujada que accepta ambdos valors a la vegada, separats per una barra.</p><p>Per exemple, <code>grid-column: 2 / 4;</code> establirà el començament de l\'element de la quadrícula a la 2a línia vertical d\'aquesta, i el final a la 4a línia vertical.</p>',
      'vi': '<p>Cậu có thấy mệt mỏi vì việc phải gõ cả 2 thuộc tính <code>grid-column-start</code> và <code>grid-column-end</code> không?. May thay, <code>grid-column</code> là một thuộc tính rút gọn chấp nhập 2 thuộc tính này cùng lúc, các giá trị cách nhau bằng một dấu sổ chéo.</p><p>Ví dụ, <code>grid-column: 2 / 4;</code> sẽ thiết lập đối tượng bên trong grid bắt đầu từ dòng kẻ dọc thứ 2 và kết thúc ở dòng thứ 4.</p>',
      'ar': '<p> كتابة  <code>grid-column-start</code> و <code>grid-column-end</code> في كل مرة يمكن ان يكون امر متعب. لحسن الحظ تعد <code>grid-column</code> اختصاراً يمكنها قبول كلتا القيمتين دفعة واحدة مفصولتين بشرطة مائلة (/) </p><p>على سبيل المثال, <code>grid-column: 2 / 4;</code> ستحدد العنصر ليبدا من ثاني خط عامودي في الجريد و ينتهي عند الخط الرابع.</p>',
      'fi': '<p>On aika vaivalloista kirjoittaa aina sekä <code>grid-column-start</code> että <code>grid-column-end</code>. Onneksi on yhdistelmäominaisuus <code>grid-column</code>, jolle voi määrittää molemmat arvot samalla kertaa vinoviivalla eroteltuna.</p><p>Esimerkiksi <code>grid-column: 2 / 4;</code> asettaa ruudukkoelementin aloituskohdan toiseen pystyviivaan ja lopetuskohdan neljänteen.</p>',
      'hu': '<p>Fárasztó lehet folyton kiírni a <code>grid-column-start</code> és <code>grid-column-end</code> tulajdonságokat. Szerencsére a <code>grid-column</code> rövidített tulajdonság használatával a két érték egymástól perjellel elválasztva egyszerre is megadható.</p><p>Például a <code>grid-column: 2 / 4;</code> a rácselem kezdetét a második, a végét pedig a negyedik rácsvonalra állítja be.</p>',
      'id': '<p>Mengetik kedua <code>grid-column-start</code> dan <code>grid-column-end</code> setiap saat bisa jadi sangat melelahkan. Untungnya, <code>grid-column</code> adalah properti singkatan yang dapat menerima kedua nilai sekaligus, dipisahkan dengan slash (garis miring).</p><p>Sebagai contoh, <code>grid-column: 2 / 4;</code> akan mengatur item grid untuk memulai pada garis grid vertikal ke-2 dan berakhir pada garis grid ke-4.</p>',
      'tl': '<p>Nakakapagod din kung lagi mong ita-type pareho ang <code>grid-column-start</code> at <code>grid-column-end</code>. Buti na lang, pwede ito mapaiksi gamit ang property na <code>grid-column</code>. Kaya nito tanggapin \'yung parehas na value nang sabay, na seperated ng slash.</p><p>Halimbawa, ise-set ng <code>grid-column: 2 / 4;</code> ang grid item para magsimula sa pangalawang linya ng vertical grid at magtapos sa pang-apat na linya ng grid.</p>',
      'al': '<p>Duke përdorur bashkë <code>grid-column-start</code> dhe <code>grid-column-end</code> gjithmonë mund të bëhet e lodhshme. Për fat të mirë, <code>grid-column</code> është një shkurtim që i pranon të dyja vlerat njëkohesisht, të ndara nga një slash.</p><p>Për shembull, <code>grid-column: 2 / 4;</code> do të vendosë gjerësine e gird item të fillojë në vijën e dytë vertikale të grid dhe të mbarojë në vijën e katërt të grid line.</p>',
    },
    board: 'c',
    selector: '> :nth-child(1)',
    style: {'grid-column': '4 / 6'},
    before: "#garden {\n  display: grid;\n  grid-template-columns: 20% 20% 20% 20% 20%;\n  grid-template-rows: 20% 20% 20% 20% 20%;\n}\n\n#water {\n",
    after: "}"
  },
  {
    name: 'grid-column 2',
    instructions: {
      'en': '<p>Try using <code>grid-column</code> to water these carrots. The <code>span</code> keyword also works with this shorthand property so give it a try!</p>',
      'lv': '<p>Lai aplaistītu šos burkānus, pamēģini pielieto <code>grid-column</code>.Atslēgas vārds <code>span</code>  arī strādā kopā ar šo saīsināto metodi, pamēģini pievienot arī to!</p>',
      'ro': '<p>Încearcă să folosești <code>grid-column</code> pentru a uda acești morcovi. Cuvântul cheie <code>span</code> funcționează de asemenea cu această prescurtare așa că încearcă și tu!</p>',
      'zh-cn': '<p>尝试使用<code>grid-column</code>来给胡萝卜浇水。<code>span</code>关键字在这个简写中也是可以使用的，所以你也可以试一下哟！</p>',
      'zh-tw': '<p>嘗試使用 <code>grid-column</code> 來給胡蘿蔔澆水。<code>span</code> 關鍵字在這個縮寫屬性中也是可以使用的，所以你也可以試試！</p>',
      'tr': '<p><code>grid-column</code> özelliğini kullanarak bu havuçları sulayın. <code>span</code> anahtar kelimesi de bu kısayol ile çalışıyor. Deneyin!</p>',
      'fr': '<p>Essayer l\'utilisation de <code>grid-column</code> pour arroser ces carottes. Le mot clé <code>span</code> fonctionne également avec cette propriété raccourcie, essayez-le !</p>',
      'de': '<p>Versuche, <code>grid-column</code> zu benutzen, um diese Karotten zu wässern. Das Schlüsselwort <code>span</code> funktioniert ebenfalls mit dieser Kurzschrift-Eigenschaft, also versuche es!</p>',
      'nl': '<p>Probeer <code>grid-column</code> te gebruiken om de wortels water te geven. Het <code>span</code>-sleutelwoord werkt ook met deze shorthand property, dus probeer dat eens!</p>',
      'pt-br': '<p>Tente usar <code>grid-column</code> para irrigar essas cenouras. A palavra-chave <code>span</code> também funciona com essa propriedade mais curta, então dê-a uma chance!</p>',
      'ru': '<p>Попробуйте использовать <code>grid-column</code>, чтобы полить эту морковь. <code>span</code> также работает с этим сокращённым свойством, так что пробуйте!</p>',
      'pl': '<p>Spróbuj użyć <code>grid-column</code> aby podlać te marchewki. Słowo kluczowe <code>span</code> działa także ze skróconą formą tej właściwości, więc wypróbuj to!</p>',
      'es': '<p>Intenta usar <code>grid-column</code> para regar las zanahorias. La palabra clave <code>span</code> también funciona con esta propiedad abreviada así que ¡dale una oportunidad!</p>',
      'sv': '<p>Testa att använda <code>grid-column</code> för att vattna dom här morötterna. <code>span</code> fungerar också med den här förenklade varianten så testa även det!</p>',
      'fa': '<p>با استفاده از <code>grid-column</code> هویج ها را آبیاری کنید. کلمه کلیدی <code>span</code> با این شیوه کوتاه شده نیز کار می کند, امتحان کن!</p>',
      'it': '<p>Prova ad usare <code>grid-column</code> per innaffiare queste carote. Puoi anche usare <code>span</code> con questa versione abbreviata, dai provaci!</p>',
      'ko': '<p><code>grid-column</code>를 이용하여 당근에 물을 주십시오. <code>span</code> keyword도 그대로 사용이 가능합니다.</p>',
      'el': '<p>Δοκιμάστε να χρησιμοποιήσετε το <code>grid-column</code> για να ποτίσετε αυτά τα καρότα. Η λέξη-κλειδί <code>span</code> επίσης λειτουργεί με αυτή την συντομογραφική ιδιότητα - δοκιμάστε το!</p>',
      'ja': '<p><code>grid-column</code> を使ってニンジンに水をやってみてください。<code>span</code> キーワードはこの短縮プロパティにも使えるので、ぜひ使ってみましょう！</p>',
      'ua': '<p>Спробуйте використовувати <code>grid-column</code> щоб полити цю моркву. <code>span</code> також працює з цією короткою властивістю, так що пробуйте!',
      'no': '<p>Prøv å bruke <code>grid-column</code> til å vanne disse gulrøttene. Verdien <code>span</code> fungerer også med denne forkortede egenskapen, så prøv deg frem!</p>',
      'pt-pt': '<p>Tenta utilizar <code>grid-column</code> para irrigar as cenouras. A palavra-chave <code>span</code> também funciona com esta propriedade abreviada, por isso experimenta-a!</p>',
      'bg': '<p>Използвайте <code>grid-column</code>, за да полеете тези моркови. Ключовата дума <code>span</code> работи и с това свойство, така че опитайте да я приложите!</p>',
      'ca': '<p>Intenta utilitzar <code>grid-column</code> per regar les pastanagues. La paraula clau <code>span</code> també funciona amb aquesta propietat abreujada així que, dona-li una oportunitat!</p>',
      'vi': '<p>Hãy thử dùng <code>grid-column</code> để tưới nước cho cà-rốt. Từ khóa <code>span</code> vẫn sẽ dùng được với thuộc tính này!</p>',
      'ar': '<p>جرب استخدام <code>grid-column</code> لري هذا الجزر تعمل الكلمة  <code>span</code> ايضاً مع هذه الخاصية المختصرة, لذا جربها!</p>',
      'fi': '<p>Kastele nämä porkkanat <code>grid-column</code>-ominaisuuden avulla. Avainsana <code>span</code> toimii tässä yhdistelmäominaisuudessakin, joten voit kokeilla myös sitä!</p>',
      'hu': '<p>Próbáld a <code>grid-column</code> használatával megöntözni a répákat! A <code>span</code> kulcsszó is működik ezzel a tulajdonsággal, próbáld hát ki!</p>',
      'id': '<p>Coba gunakan <code>grid-column</code> untuk menyiram wortel-wortel ini. Kata kunci <code>span</code> juga berfungsi dengan properti singkatan ini, jadi cobalah!</p>',
      'tl': '<p>Subukan mo gamitin ang <code>grid-column</code> para diligan itong mga karot na \'to. Gumagana rin ang keyword na <code>span</code> kasama \'yung shorthand property, kaya i-try mo na!</p>',
      'al': '<p>Provoni të përdorni <code>grid-column</code> për të ujitur këto karota. <code>span</code> funksionon gjithashtu me këtë shkurtim kështu që provojeni!</p>',
    },
    board: 'c',
    selector: '> :nth-child(1)',
    style: {'grid-column': '2 / 5'},
    before: "#garden {\n  display: grid;\n  grid-template-columns: 20% 20% 20% 20% 20%;\n  grid-template-rows: 20% 20% 20% 20% 20%;\n}\n\n#water {\n",
    after: "}"
  },
  {
    name: 'grid-row-start 1',
    instructions: {
      'en': '<p>One of the things that sets CSS grids apart from flexbox is that you can easily position items in two dimensions: columns and rows. <code>grid-row-start</code> works much like <code>grid-column-start</code> except along the vertical axis.</p><p>Use <code>grid-row-start</code> to water these carrots.</p>',
      'lv': '<p>Viena lieta, kas CSS "grid" atšķirt no "flexbox" ir tas, ka tagad elementu ir viegli novietot divās dimensijās: rindās un kolonnās. <code>grid-row-start</code>  darbojas apmēram kā <code>grid-column-start</code>  tikai uz vertikālās ass.</p><p>Lai aplaistītu šos burkānus, lieto <code>grid-row-start</code></p>',
      'ro': '<p>Unul dintre lucrurile care deosebește CSS grids de flexbox este faptul că poți poziționa ușor elementele în două dimensiuni: coloane și rânduri. <code>grid-row-start</code> funcționează ca <code>grid-column-start</code> dar pe axa verticală.</p><p>Folosește <code>grid-row-start</code> pentru a uda acești morcovi.</p>',
      'zh-cn': '<p>其中一件事情使CSS网格布局和Flex盒布局不同的是，你可以很轻松的在二维的空间里定位一个网格项: 行和列。<code>grid-row-start</code>就像<code>grid-column-start</code>一样，只不过是在垂直方向指定起始位置。</p><p>用<code>grid-row-start</code>来给胡萝卜浇水吧！</p>',
      'zh-tw': '<p>其中一件事情使 CSS 網格佈局和 Flexbox 佈局不同的是，你可以很輕鬆的在二維的空間裡定位一個網格項: 行和列。<code>grid-row-start</code> 就像 <code>grid-column-start</code> 一樣，只不過是在垂直方向指定起始位置。</p><p>用 <code>grid-row-start</code> 來給胡蘿蔔澆水吧！</p>',
      'tr': '<p>CSS Grid\'lerini flexbox\'dan ayıran şeylerden biri, öğeleri iki boyutta da kolayca yerleştirebilmenizdir: kolonlar ve satırlar. <code>grid-row-start</code>, dikey eksen haricinde <code>grid-column-start</code> gibi çok işe yarar.</p><p> <code>grid-row-start</code>\'ı kullanarak havuçlara su verin.</p>',
      'fr': '<p>L\'une des choses qui distingue les grilles CSS de Flexbox, c\'est que vous pouvez facilement positionner des éléments sur deux dimensions : colonnes et lignes. <code>grid-row-start</code> fonctionne de façon similaire à <code>grid-column-start</code> mais sur l\'axe vertical.</p><p>Utilisez <code>grid-row-start</code> pour arroser ces carottes.</p>',
      'de': '<p>Eines der Dinge, welches CSS Grids von Flexbox unterscheidet, ist dass du Elemente auf einfache Weise in zwei Dimensionen positionieren kannst: Spalten und Zeilen. <code>grid-row-start</code> funktioniert ähnlich wie <code>grid-column-start</code>, jedoch auf der vertikalen Achse.</p><p>Benutze <code>grid-row-start</code>, um diese Karotten zu wässern.</p>',
      'nl': '<p>Eén van de dingen die CSS grids onderscheidt van Flexbox is dat je eenvoudig items kan positioneren in twee dimensies: kolommen en rijen. <code>grid-row-start</code> werkt net als <code>grid-column-start</code> behalve dat hij voor de verticale as is.</p><p>Gebruik <code>grid-row-start</code> om de wortels water te geven.</p>',
      'pt-br': '<p>Uma das coisas que separa grades CSS do Flexbox é que você pode facilmente posicionar itens em duas dimensões: colunas e linhas. <code>grid-row-start</code> funciona da mesma forma que <code>grid-column-start</code> só que pelo eixo vertical.</p><p>Use <code>grid-row-start</code> para irrigar essas cenouras.</p>',
      'ru': "<p>Одна из вещей, которая отличает CSS Grid Layout от Flexbox'а, — это то, что вы можете легко позиционировать элементы в двух направлениях: в столбцах и в строках. <code>grid-row-start</code> работает почти как <code>grid-column-start</code>, но только по вертикальной оси.</p><p>Используйте <code>grid-row-start</code>, чтобы полить эту морковь.</p>",
      'pl': '<p>Jedną z rzeczy, która rozróżnia CSS grid od flexboxa jest to, że możesz w łatwy sposób ustawiać elementy w dwóch wymiarach: kolumnach i wierszach. <code>grid-row-start</code> działa podobnie jak <code>grid-column-start</code> z wyjątkiem osi pionowej.</p><p>Użyj <code>grid-row-start</code> aby podlać marchewki.</p>',
      'es': '<p>Una de las cosas que diferencia las cuadrículas de CSS de flexbox es que puedes posicionar los elementos fácilmente en 2 dimensiones: columnas y filas. <code>grid-row-start</code> funciona de manera semejante a <code>grid-column-start</code> pero a lo largo del eje vertical.</p><p>Usa <code>grid-row-start</code> para regar las zanahorias.</p>',
      'sv': '<p>En sak som gör CSS Grid annorlunda från Flexbox är att man kan positionera element i två dimensioner; kolumner och rader. <code>grid-row-start</code> fungerar som <code>grid-column-start</code> men sätter värden på den vertikala axeln.</p><p>Använd <code>grid-row-start</code> för att vattna dom här morötterna.</p>',
      'fa': '<p>یکی از مواردی که گرید را در سی اس اس از فلکس باکس متمایز می کند این است که می توان به راحتی آیتم ها را در دو بعد جابجا کرد: ستونی و سطری. <code>grid-row-start</code> بسیار شبیه به <code>grid-column-start</code> عمل می کند اما در محور عمودی.</p><p>از <code>grid-row-start</code> برای آبیاری هویج ها استفاده کنید.</p>',
      'it': '<p>Una delle differenze principali tra CSS grid e flexbox è che con CSS grid puoi posizionare facilmente gli elementi in due dimensioni: colonne e righe. <code>grid-row-start</code> funziona esattamente come <code>grid-column-start</code> con la differenza di riferirsi all\'asse verticale.</p><p>Usa <code>grid-row-start</code> per innaffiare le tue carote.</p>',
      'ko': '<p>flexbox와 별개로 CSS 그리드를 설정하면 컬럼과 행 두가지 측면에서 쉽게 그리드 항목을 배치할 수 있습니다. <code>grid-row-start</code>는 <code>grid-column-start</code> 수직선을 제외하곤 동일하게 작동합니다.</p><p><code>grid-row-start</code>를 이용하여 당근에 물을 주십시오.</p>',
      'el': '<p>Ένα από τα πράγματα που διαφοροποιεί τα πλέγματα CSS από το Flexbox είναι ότι μπορείτε εύκολα να τοποθετήσετε αντικείμενα σε δύο διαστάσεις: στήλες και σειρές. Το <code>grid-row-start</code> λειτουργεί παρόμοια με το <code>grid-column-start</code>, αλλά πάνω στον κάθετο άξονα.</p><p>Χρησιμοποιήστε το <code>grid-row-start</code> για να ποτίσετε αυτά τα καρότα.</p>',
      'ja': '<p>CSS グリッドが flexbox より優れている点は、グリッドアイテムを行と列の2次元方向に簡単に指定できることです。<code>grid-row-start</code> は、縦軸に沿って働くという以外は <code>grid-column-start</code> と全く同じです。</p><p><code>grid-row-start</code> を使ってニンジンに水をやってください。</p>',
      'ua': "<p>Одна з речей яка розрізняє CSS grid'и від flexbox'а це те що ви можете легко позиціонувати елементи в двох напрямках: стовпців і рядках. <code>grid-row-start</code> працює майже як <code>grid-column-start</code>, але тільки на вертикальній осі.</p><p>Використовуйте <code>grid-row-start</code> щоб полити цю моркву.</p>",
      'no': '<p>En av tingene som gjør CSS grid annerledes fra Flexbox, er muligheten til å posisjonere elementer todimensjonalt i kolonner og rader. <code>grid-row-start</code> fungerer likt som <code>grid-column-start</code>, men plasserer heller elementer på den vertikale aksen.</p><p>Bruk <code>grid-row-start</code> til å vanne disse gulrøttene.</p>',
      'pt-pt': '<p>Uma das coisas que diferencia as técnicas \'CSS Grid\' e \'Flexbox\' é que podes facilmente posicionar elementos em duas dimensões: colunas e linhas. <code>grid-row-start</code> é semelhante a <code>grid-column-start</code> mas refere-se ao eixo vertical.</p><p>Utiliza <code>grid-row-start</code> para irrigar estas cenouras.</p>',
      'bg': '<p>Едно от нещата, което различава CSS grid от flexbox е лесното позициониране на елементи в две измерения: колони и редове. <code>grid-row-start</code> работи почти като <code>grid-column-start</code> освен по вертикалните оси.</p><p>Използвайте <code>grid-row-start</code>, за да полеете тези моркови.</p>',
      'ca': '<p>Una de les característiques que diferencia les quadrícules de CSS de flexbox és que pots posicionar els elements fàcilment en 2 dimensions: columnes i files. <code>grid-row-start</code> funciona de manera semblant a <code>grid-column-start</code> però a l\'eix vertical.</p><p>Utilitza <code>grid-row-start</code> per regar les pastanagues.</p>',
      'vi': '<p>Một trong những điểm khác biệt giữa CSS grids với flexbox đó chính là cậu có thể dễ dàng thiết lập vị trí của một đối tượng bên trong grid theo cả cột và hàng. <code>grid-row-start</code> hoạt động tương tự như <code>grid-column-start</code> nhưng xét theo trục đứng.</p><p>Hãy dùng <code>grid-row-start</code> để tưới thêm nước cho cà-rốt nhé.</p>',
      'ar': '<p> من الاشياء التي تميز (CSS Grid) عن (Flexbox) هو انه يمكنك بسهولة وضع العناصر في بُعدَين: الاعمدة والصفوف. يعمل <code>grid-row-start</code> الى حد كبير مثل <code>grid-column-start</code> الا انه على المحور العمودي </p><p>استخدم <code>grid-row-start</code> لري هذا الجزر</p>',
      'fi': '<p>CSS grid -asettelu eroaa flexbox-asettelusta muun muassa siten, että elementit on helppo sijoittaa kahden ulottuvuuden perusteella: pysty- ja vaakarivien. <code>grid-row-start</code> toimii samoin kuin <code>grid-column-start</code>, mutta pystyakselilla.</p><p>Kastele nämä porkkanat <code>grid-row-start</code>-ominaisuuden avulla.</p>',
      'hu': '<p>Az egyik dolog, ami megkülönbözteti a CSS rácsot a flexboxtól, hogy két dimenzióban pozícionálhatsz elemeket egyszerűen: oszlopokban és sorokban. A <code>grid-row-start</code> és <code>grid-column-start</code> nagyon hasonlóak azzal a különbséggel, hogy az első a függőleges tengely mentén működik.</p><p>Használd a <code>grid-row-start</code> tulajdonságot a répák megöntözéséhez!</p>',
      'id': '<p>Salah satu hal yang membedakan grid CSS dari flexbox adalah kamu dapat dengan mudah mengatur letak item di dua dimensi: kolom dan baris. <code>grid-row-start</code> bekerja layaknya <code>grid-column-start</code> kecuali sepanjang sumbu vertikal.</p><p>Gunakan <code>grid-row-start</code> untuk menyiram wortel-wortel ini.</p>',
      'tl': '<p>Isa sa nagpapaiba sa CSS grid sa flexbox ay pwede mong ipuwesto ang mga item sa dalawang dimensions: columns at rows. Ang <code>grid-row-start</code> ay parang <code>grid-column-start</code> din lang pero ang axis nito ay pa-vertical.</p><p>Gamitin mo ang <code>grid-row-start</code> para diligan itong mga karot.</p>',
      'al': '<p>Njëra nga cilësitë që e veçon CSS grid nga flexbox është që ju lehtëisht mund të poziciononi items në dy dimensione: rrjeshta dhe kolona. <code>grid-row-start</code> funksionon njësoj si <code>grid-column-start</code> me përjashtim se në aksin vertikal.</p><p>Përdor <code>grid-row-start</code> për të ujitur këto karota.</p>',
    },
    board: 'c',
    selector: '> :nth-child(1)',
    style: {'grid-row-start': '3'},
    before: "#garden {\n  display: grid;\n  grid-template-columns: 20% 20% 20% 20% 20%;\n  grid-template-rows: 20% 20% 20% 20% 20%;\n}\n\n#water {\n",
    after: "}"
  },
  {
    name: 'grid-row-start 2',
    instructions: {
      'en': '<p>Now give the shorthand property <code>grid-row</code> a try.</p>',
      'lv': '<p>Izmēģini saīsināto metodi <code>grid-row</code>.</p>',
      'ro': '<p>Acum încearcă și varianta prescurată <code>grid-row</code>.</p>',
      'zh-cn': '<p>现在你可以试一试缩写属性 <code>grid-row</code>。</p>',
      'zh-tw': '<p>現在你可以試一試縮寫屬性 <code>grid-row</code>。</p>',
      'tr': '<p>Şimdi kısayol özelliği olan: <code>grid-row</code> özelliğini deneyin.</p>',
      'fr': '<p>Maintenant, essayez en prenant la propriété raccourcie <code>grid-row</code>.</p>',
      'de': '<p>Versuche nun die Kurzschrift-Eigenschaft <code>grid-row</code>.</p>',
      'nl': '<p>Probeer nu de shorthand property <code>grid-row</code> uit.</p>',
      'pt-br': '<p>Agora dê uma chance à propriedade curta <code>grid-row</code>.</p>',
      'ru': '<p>А теперь попробуйте использовать сокращённое свойство <code>grid-row</code>.</p>',
      'pl': '<p>Teraz spróbuj użyć skróconej właściwości <code>grid-row</code>.</p>',
      'es': '<p>Ahora dale una oportunidad a la propiedad abreviada <code>grid-row</code>.</p>',
      'sv': '<p>Testa nu med den förenklade varianten <code>grid-row</code>.</p>',
      'fa': '<p>حالا از روش کوتاه شده <code>grid-row</code> استفاده کنید.</p>',
      'it': '<p>Ora prova con la versione abbreviata <code>grid-row</code>.</p>',
      'ko': '<p>이번에는 <code>grid-row</code> 속성을 이용하여 물을 주세요.</p>',
      'el': '<p>Τώρα δοκιμάστε με την συντομογραφική ιδιότητα <code>grid-row</code>.</p>',
      'ja': '<p>次は、短縮プロパティ <code>grid-row</code> を試しましょう。</p>',
      'ua': '<p>А тепер спробуйте використовувати коротку властивість <code>grid-row</code>.</p>',
      'no': '<p>Prøv nå med den forkortede egenskapen <code>grid-row</code>.</p>',
      'pt-pt': '<p>Agora experimenta a propriedade abreviada <code>grid-row</code>.</p>',
      'bg': '<p>Сега опитайте да използвате съкратената версия <code>grid-row</code>.</p>',
      'ca': '<p>Ara dona una oportunitat a la propietat abreujada <code>grid-row</code>.</p>',
      'vi': '<p>Bây giờ hãy thử với thuộc tính rút gọn <code>grid-row</code>.</p>',
      'ar': '<p>الان جرب الخاصية المختصرة <code>grid-row</code> </p> ',
      'fi': '<p>Kokeile nyt yhdistelmäominaisuutta <code>grid-row</code>.</p>',
      'hu': '<p>Most próbáld ki a <code>grid-row</code> rövidített tulajdonságot!</p>',
      'id': '<p>Sekarang coba berikan properti singkatan <code>grid-row</code>.</p>',
      'tl': '<p>Subukan mo naman ngayon gamitin ang shorthand property na <code>grid-row</code>.</p>',
      'al': '<p>Tani jepini shkurtimit <code>grid-row</code> një provë.</p>',
    },
    board: 'c',
    selector: '> :nth-child(1)',
    style: {'grid-row': '3 / 6'},
    before: "#garden {\n  display: grid;\n  grid-template-columns: 20% 20% 20% 20% 20%;\n  grid-template-rows: 20% 20% 20% 20% 20%;\n}\n\n#water {\n",
    after: "}"
  },
  {
    name: 'grid-column-row 1',
    instructions: {
      'en': '<p>Use <code>grid-column</code> and <code>grid-row</code> at the same time to set position in both dimensions.</p>',
      'lv': '<p>Pamēģini vienlaicīgi pielietot gan <code>grid-column</code>, gan <code>grid-row</code>.</p>',
      'ro': '<p>Folosește <code>grid-column</code> și <code>grid-row</code> în același timp pentru a seta poziția în ambele dimensiuni.</p>',
      'zh-cn': '<p>同时使用<code>grid-column</code>和<code>grid-row</code>来设置网格项在行和列中的位置。</p>',
      'zh-tw': '<p>同時使用 <code>grid-column</code> 和 <code>grid-row</code> 來設置網格項在行和列的位置。</p>',
      'tr': '<p><code>grid-column</code> ve <code>grid-row</code> özelliklerini aynı anda kullanarak pozisyonu iki boyutta da ayarlayın.</p>',
      'fr': '<p>Utilisez <code>grid-column</code> et <code>grid-row</code> en même temps pour définir la position dans les deux dimensions.</p>',
      'de': '<p>Benutze <code>grid-column</code> und <code>grid-row</code> gleichzeitig, um die Position in beiden Dimensionen festzulegen.</p>',
      'nl': '<p>Gebruik <code>grid-column</code> en <code>grid-row</code> tegelijkertijd om de positie in beide dimensies in te stellen.</p>',
      'pt-br': '<p>Use <code>grid-column</code> e <code>grid-row</code> ao mesmo tempo para definir ambas as dimensões.</p>',
      'ru': '<p>Используйте <code>grid-column</code> и <code>grid-row</code> одновременно, чтобы разместить элемент в двух направлениях.</p>',
      'pl': '<p>Użyj <code>grid-column</code> i <code>grid-row</code> razem, aby ustawić pozycję w dwóch wymiarach.</p>',
      'es': '<p>Usa <code>grid-column</code> y <code>grid-row</code> a la vez para establecer una posición en ambas dimensiones.</p>',
      'sv': '<p>Använd <code>grid-column</code> och <code>grid-row</code> samtidigt för att sätta positionen längs båda axlarna.</p>',
      'fa': '<p>از هردوی <code>grid-column</code> و <code>grid-row</code> با هم برای جابجایی در هر دو بعد استفاده کنید.</p>',
      'it': '<p>Ora usa contemporaneamente <code>grid-column</code> e <code>grid-row</code> per posizionare il diserbante (poison) usando entrambe le dimensioni.</p>',
      'ko': '<p><code>grid-column</code>와 <code>grid-row</code>를 동시에 사용해서 위치를 지정해보세요.</p>',
      'el': '<p>Χρησιμοποιήστε ταυτόχρονα το <code>grid-column</code> και το <code>grid-row</code> για να ορίσετε την θέση και στις δύο διαστάσεις.</p>',
      'ja': '<p><code>grid-column</code> と <code>grid-row</code> を同時に使って、2次元方向に位置を指定しましょう。</p>',
      'ua': '<p>Використовуйте <code>grid-column</code> і <code>grid-row</code> одночасно, для того щоб позиціонувати елемент в двох напрямках.',
      'no': '<p>Bruk <code>grid-column</code> og <code>grid-row</code> samtidig for å plassere elementer todimensjonalt.</p>',
      'pt-pt': '<p>Utiliza <code>grid-column</code> e <code>grid-row</code> juntas para estabelecer uma posição nas duas dimensões.</p>',
      'bg': '<p>Използвайте <code>grid-column</code> и <code>grid-row</code> заедно, за да определите позицията на grid-елемента в две измерения.</p>',
      'ca': '<p>Utilitza <code>grid-column</code> i <code>grid-row</code> a la vegada per establir una posició en ambduess dimensions.</p>',
      'vi': '<p>Hãy dùng cả <code>grid-column</code> và <code>grid-row</code> để thiết lập vị trí theo cả trục đứng và trục ngang.</p>',
      'ar': '<p> استخدم <code>grid-column</code> و <code>grid-row</code> في نفس الوقت لتعيين الموضع في كِلا البعدين.</p>',
      'fi': '<p>Voit määrittää sijainnin molemmat ulottuvuudet määrittämällä ominaisuudet <code>grid-column</code> ja <code>grid-row</code> yhdessä.</p>',
      'hu': '<p>Mos használd együtt a <code>grid-column</code> és <code>grid-row</code> tulajdonságokat, hogy mindkét irányú kiterjedést beállítsd!</p>',
      'id': '<p>Gunakan <code>grid-column</code> dan <code>grid-row</code> di waktu yang bersamaan untuk mengatur letak di kedua dimensi.</p>',
      'tl': '<p>Gamitin mo naman nang sabay ang <code>grid-column</code> at <code>grid-row</code> para ipuwesto sa parehong dimensions.</p>',
      'al': '<p>Përdorni <code>grid-column</code> dhe <code>grid-row</code> njekohësisht për të pozicionuar në të dyja dimensionet.</p>',
    },
    board: 'w',
    selector: '> :nth-child(1)',
    style: {'grid-column': '2', 'grid-row': '5'},
    before: "#garden {\n  display: grid;\n  grid-template-columns: 20% 20% 20% 20% 20%;\n  grid-template-rows: 20% 20% 20% 20% 20%;\n}\n\n#poison {\n",
    after: "}"
  },
  {
    name: 'grid-column-row 2',
    instructions: {
      'en': '<p>You can also use <code>grid-column</code> and <code>grid-row</code> together to span larger areas within the grid. Give it a try!</p>',
      'lv': '<p>Tāpat vari arī vienlaicīgi pielietot gan <code>grid-column</code>, gan <code>grid-row</code>, kas tev palīdzēs ietvert plašākus laukumus tavā "grid". Pamēģini!</p>',
      'ro': '<p>Poți, de asemenea, folosi <code>grid-column</code> și <code>grid-row</code> împreună pentru a acoperi zone mai mari în grid. Încearcă și tu!</p>',
      'zh-cn': '<p>你也可以使用<code>grid-column</code>和<code>grid-row</code>一起来定义一个较大区域的网格。试一下吧！</p>',
      'zh-tw': '<p>你也可以使用 <code>grid-column</code> 和 <code>grid-row</code> 一起來定義一個較大區域的網格。試一下吧！</p>',
      'tr': '<p><code>grid-column</code> ve <code>grid-row</code> özelliklerini aynı anda kullanarak da grid içerisindeki daha fazla alana yayılabilirsiniz. Deneyin!</p>',
      'fr': '<p>Vous pouvez aussi utiliser <code>grid-column</code> et <code>grid-row</code> ensemble pour étendre des zones plus vastes dans de la grille. Essayez !</p>',
      'de': '<p>Du kannst auch <code>grid-column</code> und <code>grid-row</code> zusammen einsetzen, um größere Bereiche im Raster zu erfassen. Versuche es!</p>',
      'nl': '<p>Je kan ook <code>grid-column</code> en <code>grid-row</code> samen gebruiken om grotere gebieden in het grid te beslaan. Probeer het uit!</p>',
      'pt-br': '<p>Você também pode usar <code>grid-column</code> e <code>grid-row</code> juntas para abranger áreas maiores dentro da grade. Dê uma chance!</p>',
      'ru': '<p>Вы также можете использовать <code>grid-column</code> и <code>grid-row</code> вместе, чтобы охватить более крупные зоны внутри grid-сетки. Пробуйте!</p>',
      'pl': '<p>Możesz także użyć <code>grid-column</code> i <code>grid-row</code> razem, aby pokryć większą powierzchnię wewnątrz siatki grid. Spróbuj!</p>',
      'es': '<p>También puedes usar <code>grid-column</code> y <code>grid-row</code> juntos para abarcar áreas más extensas en la cuadrícula. ¡Inténtalo!</p>',
      'sv': '<p>Du kan också sätta <code>grid-column</code> och <code>grid-row</code> tillsammans för att täcka större ytor inuti rutnätet. Testa!</p>',
      'fa': '<p>همچنین می توانید از<code>grid-column</code> و <code>grid-row</code> باهم برای پوشش نواحی بزرگتر با گرید استفاده کنید. امتحان کن!</p>',
      'it': '<p>Puoi anche usare <code>grid-column</code> e <code>grid-row</code> insieme per creare una griglia più grande. Dai provaci!</p>',
      'ko': '<p>또한 <code>grid-column</code>와 <code>grid-row</code>를 span과 함께 사용하여 넓은 영역을 지정할 수 있습니다. 한번 시도해보세요.!</p>',
      'el': '<p>Μπορείτε επίσης να χρησιμοποιήσετε τα <code>grid-column</code> και <code>grid-row</code> μαζί για να καλύψετε μεγαλύτερες περιοχές μέσα στο πλέγμα. Δοκιμάστε το!</p>',
      'ja': '<p><code>grid-column</code> と <code>grid-row</code> をあわせて使えば、もっと広いグリッドも指定できます。試してみてください！</p>',
      'ua': '<p>Ви також можете використовувати <code>grid-column</code> і <code>grid-row</code> разом для того щоб охопити більш великі зони всередині grid сітки. Пробуйте!</p>',
      'no': '<p>Du kan også bruke <code>grid-column</code> og <code>grid-row</code> sammen for å dekke større områder på rutenettet. Prøv deg frem!</p>',
      'pt-pt': '<p>Também podes juntar <code>grid-column</code> e <code>grid-row</code> para abranger áreas maiores dentro da grelha. Experimenta!</p>',
      'bg': '<p>Можете също да използвате <code>grid-column</code> и <code>grid-row</code> заедно, за да обхванете по-голяма зона от решетката. Опитайте!</p>',
      'ca': '<p>També pots utilitzar <code>grid-column</code> i <code>grid-row</code> a la vegada per abarcar àrees més extenses en la quadrícula. Prova-ho!</p>',
      'vi': '<p>Cậu cũng có thể kết hợp <code>grid-column</code> và <code>grid-row</code> để mở rộng vùng lựa chọn bên trong grid. Thử nhé!</p>',
      'ar': '<p>يمكنك ايضاً استخدام <code>grid-column</code> و <code>grid-row</code> معاً لتوسيع مساحات اكبر داخل الجريد. جربها!</p>',
      'fi': '<p>Voit käyttää ominaisuuksia <code>grid-column</code> ja <code>grid-row</code> yhdessä, kun tarvitsee levittäytyä isommalle alueelle ruudukossa. Kokeile vaikka!</p>',
      'hu': '<p>A <code>grid-column</code> és <code>grid-row</code> együtt, használhatóak a rács nagyobb területeire való kiterjeszkedéshez. Próbáld ki!</p>',
      'id': '<p>Kamu juga bisa menggunakan <code>grid-column</code> dan <code>grid-row</code> secara bersama-sama untuk menjangkau area yang lebih luas di dalam grid. Cobalah!</p>',
      'tl': '<p>Pwede mo rin gamitin pareho ang <code>grid-column</code> at <code>grid-row</code> para sakupin nang mas malaki ang mga area sa loob ng grid. Try mo na!</p>',
      'al': '<p>Ju gjithashtu mund të përdorni <code>grid-column</code> dhe <code>grid-row</code> bashkë për tu shtrirë më shumë ne hapësiren brenda grid. Provojeni!</p>',
    },
    board: 'c',
    selector: '> :nth-child(1)',
    style: {'grid-column': '2 / 6', 'grid-row': '1 / 6'},
    before: "#garden {\n  display: grid;\n  grid-template-columns: 20% 20% 20% 20% 20%;\n  grid-template-rows: 20% 20% 20% 20% 20%;\n}\n\n#water {\n",
    after: "}"
  },
  {
    name: 'grid-area 1',
    instructions: {
      'en': '<p>If typing out both <code>grid-column</code> and <code>grid-row</code> is too much for you, there\'s yet another shorthand for that. <code>grid-area</code> accepts four values separated by slashes: <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code>, followed by <code>grid-column-end</code>.</p><p>One example of this would be <code>grid-area: 1 / 1 / 3 / 6;</code>.</p>',
      'lv': '<p>Vienlaicīgi lietot gan <code>grid-column</code>, gan <code>grid-column</code> šķiet pārāk nogurdinoši? Par laimi to atvieglo saīsinātā metode <code>grid-area</code>, kas pieņem četras vērtības (atdalītas ar slīpsvītru):  <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code><p>, <code>grid-column-end</code>.</p><p>Te būs viens piemērs : <code>grid-area: 1 / 1 / 3 / 6;</code>.</p>',
      'ro': '<p>Dacă să scrii <code>grid-column</code> și <code>grid-row</code> este prea mult pentru tine, există o prescurtare pentru aceastea. <code>grid-area</code> acceptă patru valori separate de slashuri: <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code>, urmate de <code>grid-column-end</code>.</p><p>Un exemplu pentru aceasta ar fi <code>grid-area: 1 / 1 / 3 / 6;</code>.</p>',
      'zh-cn': '<p>如果你觉得同时输入<code>grid-column</code>和<code>grid-row</code>也很复杂，我们还有另一种缩写。<code>grid-area</code>属性接受4个由\'/\'分开的值：<code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code>, 最后是<code>grid-column-end</code>。</p><p>举个例子如下所示：<code>grid-area: 1 / 1 / 3 / 6;</code>。</p>',
      'zh-tw': '<p>如果你覺得同時輸入 <code>grid-column</code> 和 <code>grid-row</code> 太麻煩，那還有另一種縮寫可用。<code>grid-area</code> 屬性接受 4 個由 \'/\' 分開的值：<code>grid-row-start</code>、<code>grid-column-start</code>、<code>grid-row-end</code>，最後是 <code>grid-column-end</code>。</p><p>舉個例子如下所示：<code>grid-area: 1 / 1 / 3 / 6;</code>。</p>',
      'tr': '<p>Hem <code>grid-column</code> hem de <code>grid-row</code> yazmak sizin için fazla geliyorsa, bunun için başka bir kısa yol var. <code>grid-area</code> taksim işareti ile ayrılmış dört değeri kabul eder: <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code> ve <code>grid-column-end</code>.</p><p>Örnek olarak: <code>grid-area: 1 / 1 / 3 / 6;</code>.</p>',
      'fr': '<p>Si taper à la fois <code>grid-column</code> et <code>grid-row</code> est trop long pour vous, il y a encore un raccourci pour cela. <code>grid-area</code> accepte quatre valeurs séparées par des slashes : <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code>, suivies par <code>grid-column-end</code>.</p><p>Un exemple de cela serait<code>grid-area: 1 / 1 / 3 / 6;</code>.</p>',
      'de': '<p>Falls <code>grid-column</code> und <code>grid-row</code> einzutippen zu viel für dich ist, gibt es eine weitere Kurzschrift-Eigenschaft dafür. <code>grid-area</code> akzeptiert vier Werte, durch einen Schrägstrich getrennt: <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code>, gefolgt von <code>grid-column-end</code>.</p><p>Ein Beispiel dafür wäre <code>grid-area: 1 / 1 / 3 / 6;</code>.</p>',
      'nl': '<p>Als <code>grid-column</code> en <code>grid-row</code> typen te veel werk voor je is, is daar een andere shorthand voor. <code>grid-area</code> accepteert vier waarden gescheiden door slashes: <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code>, gevolgd door <code>grid-column-end</code>.</p><p>Een voorbeeld: <code>grid-area: 1 / 1 / 3 / 6;</code>.</p>',
      'pt-br': '<p>Se digitar ambos <code>grid-column</code> e <code>grid-row</code> é muito para você, há ainda outra propriedade curta para isso. <code>grid-area</code> aceita quatro valores separados por barras: <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code>, seguido por <code>grid-column-end</code>.</p><p>Um exemplo disso poderia ser <code>grid-area: 1 / 1 / 3 / 6;</code>.</p>',
      'ru': '<p>Если вас также утомляет печатать <code>grid-column</code> и <code>grid-row</code>, есть сокращённое свойство и для этого. <code>grid-area</code> принимает 4 значения, разделенные косой чертой <code>/</code>: <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code> и <code>grid-column-end</code>.</p><p>Пример: <code>grid-area: 1 / 1 / 3 / 6;</code>.</p>',
      'pl': '<p>Jeżeli pisanie obu <code>grid-column</code> i <code>grid-row</code> to dla ciebie za dużo, istnieje skrócona wersja tych właściwości. <code>grid-area</code> akceptuje cztery wartości rozdzielone przez ukośnik: <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code> oraz <code>grid-column-end</code>.</p><p>Jednym z przykładów jest <code>grid-area: 1 / 1 / 3 / 6;</code>.</p>',
      'es': '<p>Si escribir <code>grid-column</code> y <code>grid-row</code> se te hace demasiado pesado, aquí tienes otra propiedad abreviada. <code>grid-area</code> admite cuatro valores separados por barras oblicuas: <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code>, seguido de <code>grid-column-end</code>.</p><p>Un ejemplo de esto podría ser <code>grid-area: 1 / 1 / 3 / 6;</code>.</p>',
      'sv': '<p>Ifall du tycker att skriva både <code>grid-column</code> och <code>grid-row</code> är för mycket så kan du använda en ännu enklare variant! <code>grid-area</code> tar emot fyra värden separerade med slashtecken: <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code> och <code>grid-column-end</code>.</p><p>Ett exempel skulle kunna vara <code>grid-area: 1 / 1 / 3 / 6;</code>.</p>',
      'fa': '<p>اگر تایپ همزمان <code>grid-column</code> و <code>grid-row</code> برایتان خیلی سخت است, روش کوتاه شده دیگری برای این مورد هم وجود دارد. <code>grid-area</code> چهار مقدار جداشده با اسلش را می پذیرد: <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code>, و در نهایت <code>grid-column-end</code>.</p><p>یک مثال این شیوه به این شکل است: <code>;grid-area: 1 / 1 / 3 / 6</code>.</p>',
      'it': '<p>Se per te è troppo usare ogni volta <code>grid-column</code> e <code>grid-row</code>, c\'è una scorciatoia anche per questo. <code>grid-area</code> accetta quattro valori separati da uno slash: <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code>, seguito da <code>grid-column-end</code>.</p><p>Un esempio di questo potrebbe essere <code>grid-area: 1 / 1 / 3 / 6;</code>.</p>',
      'ko': '<p><code>grid-column</code>와 <code>grid-row</code> 모두를 입력하는게 너무 많은경우, 다른 속성을 이용하여 줄일 수 있습니다. <code>grid-area</code>은 /(슬래쉬)로 구분지어 <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code>, <code>grid-column-end</code>순으로 입력 가능합니다.</p><p>한가지로 예로 다음과 같습니다. <code>grid-area: 1 / 1 / 3 / 6;</code></p>',
      'el': '<p>Αν η πληκτρολόγηση αμφότερων των <code>grid-column</code> και <code>grid-row</code> σας κουράζει, υπάρχει ακόμη μία συντόμευση για αυτό.  Το <code>grid-area</code> αποδέχεται τέσσερις αξίες χωριζόμενες με καθέτους: τα <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code>, ακολουθούμενα από το <code>grid-column-end</code>.</p><p>Ένα παράδειγμα αυτού θα ήταν: <code>grid-area: 1 / 1 / 3 / 6;</code>.</p>',
      'ja': '<p><code>grid-column</code> と <code>grid-row</code> の2つもタイピングするなんて大変だ、と思う人もいるでしょう。そんなあなたのために、もう一つのショートカットがあります。<code>grid-area</code> は、4つの値をスラッシュで区切って与えることで、なんと <code>grid-row-start</code>、<code>grid-column-start</code>、<code>grid-row-end</code>、<code>grid-column-end</code> を同時に指定できてしまいます。</p><p>こんなふうに指定します。<code>grid-area: 1 / 1 / 3 / 6;</code></p>',
      'ua': '<p>Якщо для вас надрукувати <code>grid-column</code> і <code>grid-row</code> забагато, є інша коротка властивість для цього. <code>grid-area</code> приймає 4 значення, розділені слешем " / ": <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code> та <code>grid-column-end</code>.</p><p>Прикладом для цього буде <code>grid-area: 1 / 1 / 3 / 6;</code>.</p>',
      'no': '<p>Hvis du synes det blir for mye å skrive både <code>grid-column</code> og <code>grid-row</code>, finnes det nok en fortkortet egenskap for dette. <code>grid-area</code> godtar fire verdier skilt med skråstreker: <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code>, og <code>grid-column-end</code>.</p><p>Et eksempel på dette er <code>grid-area: 1 / 1 / 3 / 6;</code>.</p>',
      'pt-pt': '<p>Se escrever <code>grid-column</code> e <code>grid-row</code> é demasiado longo para ti, existe também uma propriedade abreviada para o efeito. <code>grid-area</code> aceita quatro valores separados por " / ": <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code>, seguida por <code>grid-column-end</code>.</p><p>Um exemplo seria <code>grid-area: 1 / 1 / 3 / 6;</code>.</p>',
      'bg': '<p>Ако писането на <code>grid-column</code> и <code>grid-row</code> е прекалено за вас, отново може да използвате съкратено свойство. <code>grid-area</code> приема четири стойности разделени с наклонена черта: <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code>, последвани от <code>grid-column-end</code>.</p><p>Например <code>grid-area: 1 / 1 / 3 / 6;</code>.</p>',
      'ca': '<p>Si escriure <code>grid-column</code> i <code>grid-row</code> se\'t fa massa feixuc, aquí tens una altra propietat abreujada. <code>grid-area</code> admet quatre valors separats per barres: <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code>, seguit de <code>grid-column-end</code>.</p><p>Un exemple d\'aquest podria ser <code>grid-area: 1 / 1 / 3 / 6;</code>.</p>',
      'vi': '<p>Một cách rút gọn có thể kết hợp cả 2 thuộc tính <code>grid-column</code> và <code>grid-row</code> là <code>grid-area</code>, 4 giá trị lần lượt nhận vào sẽ cách nhau bằng dấu sổ chéo: <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code>, <code>grid-column-end</code>.</p><p>Ví dụ như <code>grid-area: 1 / 1 / 3 / 6;</code>.</p>',
      'ar' : '<p>اذا كانت كتابة كل من <code>grid-column</code> و <code>grid-row</code> اكثر من اللازم بالنسبة لك, فهناك اختصار اخر لذلك. تقبل <code>grid-area</code> اربع قيم مفصولة بشرطة مائلة (/) : <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code>, متبوعة بـ<code>grid-column-end</code> </p><p>احد الامثلة على ذلك هو <code>grid-area: 1 / 1 / 3 / 6;</code> </p>',
      'fi': '<p>Jos ominaisuuksien <code>grid-column</code> ja <code>grid-row</code> kirjoittaminenkin on liikaa, avuksi tulee vielä yksi yhdistelmäominaisuus. Ominaisuudelle <code>grid-area</code> määritetään neljä arvoa vinoviivoin eroteltuna: <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code> ja viimeisenä <code>grid-column-end</code>.</p><p>Esimerkiksi <code>grid-area: 1 / 1 / 3 / 6;</code>.</p>',
      'hu': '<p>Ha a <code>grid-column</code> és <code>grid-row</code> tulajdonságok kiírása túl megterhelő lenne, létezik egy rövidítés e kettő kiváltására. A <code>grid-area</code> négy, egymástól perjellel elválasztott értéket fogad: <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code>, és végül <code>grid-column-end</code>.</p><p>Például: <code>grid-area: 1 / 1 / 3 / 6;</code></p>',
      'id': '<p>Jika kamu mengetik kedua <code>grid-column</code> dan <code>grid-row</code> terlalu berlebihan untukmu, masih ada singkatan lain untuk itu. <code>grid-area</code> menerima empat nilai yang dipisahkan dengan slash: <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code>, diikuti oleh <code>grid-column-end</code>.</p><p>Salah satu contohnya adalah <code>grid-area: 1 / 1 / 3 / 6;</code>.</p>',
      'tl': '<p>Kung nakakapagod sa \'yo i-type pareho ang <code>grid-column</code> at <code>grid-row</code>, may paraan din para mapaiksi ito. Ang <code>grid-area</code> ay tumatanggap ng apat na values na separated ng mga slash: <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code>, kasunod ng <code>grid-column-end</code>.</p><p>Halimbawa nito ay <code>grid-area: 1 / 1 / 3 / 6;</code>.</p>',
      'al': '<p>Nëse të përdorni bashkë <code>grid-column</code> dhe <code>grid-row</code> është shumë punë, ekziston një shkurtim tjetër për këtë. <code>grid-area</code> pranon katër vlera të ndara nga slash: <code>grid-row-start</code>, <code>grid-column-start</code>, <code>grid-row-end</code>, duke u njekur nga <code>grid-column-end</code>.</p><p>Një shembull është <code>grid-area: 1 / 1 / 3 / 6;</code>.</p>',
    },
    board: 'c',
    selector: '> :nth-child(1)',
    style: {'grid-area': '1 / 2 / 4 / 6'},
    before: "#garden {\n  display: grid;\n  grid-template-columns: 20% 20% 20% 20% 20%;\n  grid-template-rows: 20% 20% 20% 20% 20%;\n}\n\n#water {\n",
    after: "}"
  },
  {
    name: 'grid-area 2',
    instructions: {
      'en': '<p>How about multiple items? You can overlap them without any trouble. Use <code>grid-area</code> to define a second area that covers all of the unwatered carrots.</p>',
      'lv': '<p>Kā būtu ar vairākieim elementiem? Tu vari droši likt tiem pārklāties bez jebkādām problēmām. Pamēģini pielietot <code>grid-area</code>, lai nodefinētu otru laukumu, kas aplaistīs iepriekš neaplaistītos burkānus.</p>',
      'ro': '<p>Ce se întamplă cu elemente multiple? Poți să le suprapui fară nicio problemă. Folosește <code>grid-area</code> pentru a defini o a doua zonă care acoperă toți morcovii care nu sunt udați.</p>',
      'zh-cn': '<p>如果我们有很多个网格项呢？你可以任意覆盖它们不用有任何担心。用<code>grid-area</code>定义第二个网格项为所有未浇水的胡萝卜浇水。</p>',
      'zh-tw': '<p>如果我們有很多個網格項呢？你可以任意覆蓋它們不用有任何擔心。用 <code>grid-area</code> 定義第二個網格項為所有未澆水的胡蘿蔔澆水。</p>',
      'tr': '<p>Ya birden fazla öğe olursa?  Onları herhangi bir sorun yaşamadan örtüştürebilirsiniz. <code>grid-area</code> özelliğini kullanarak, sulanmamış tüm havuçların üzerini kaplayacak ikinci bir alan tanımlayın.</p>',
      'fr': '<p>Que diriez-vous de plusieurs éléments ? Vous pouvez les chevaucher sans problème. Utilisez <code>grid-area</code> pour définir une deuxième région qui couvre toutes les carottes non arrosées.</p>',
      'de': '<p>Wie wäre es mit mehreren Elementen? Diese können sich problemlos überlagern. Verwende <code>grid-area</code>, um einen zweiten Bereich zu definieren, welcher alle ungewässerten Karotten überlagert.</p>',
      'nl': '<p>Hoe zit het met meerdere items? Je mag ze gewoon laten overlappen. Gebruik <code>grid-area</code> om een tweede gebied te definiëren, dat alle onbewaterde wortels bedekt.</p>',
      'pt-br': '<p>Que tal múltiplos itens? Você pode sobrepor-los sem problemas. Use <code>grid-area</code> para definir uma área secundária que cobre todas as cenouras não irrigadas.</p>',
      'ru': '<p>Как насчет множества элементов? Вы можете накладывать их друг на друга без проблем. Используйте <code>grid-area</code>, чтобы определить вторую зону, которая покроет всю не политую морковь.</p>',
      'pl': '<p>A co z wieloma elementami? Możesz je nakładać bez problemu. Użyj <code>grid-area</code> aby zdefiniować drugą powierzchnię, która pokryje niepodlane marchewki.</p>',
      'es': '<p>¿Y qué me dices de múltiples elementos? Puedes superponerlos sin problema. Usa <code>grid-area</code> para definir una segunda área que cubra todas las zanahorias que están sin regar.</p>',
      'sv': '<p>Vad gör vi med multipla element? Dom kan överlappa utan problem. Använd <code>grid-area</code> för att definiera ett andra område som täcker all dina morötter.</p>',
      'fa': '<p>در مورد چندین آیتم جطور؟ می توانید بدون دردسر آنها را روی هم بیاندازید. از <code>grid-area</code> برای تعریف ناحیه دومی که هویج های آبیاری نشده را پوشش دهد استفاده کنید.</p>',
      'it': '<p>E se volessi usare più di un elemento? Puoi sovrapporre elementi senza problemi. Usa <code>grid-area</code> per definire una seconda area che vada a coprire tutte le carote non ancora innaffiate.</p>',
      'ko': '<p>여러 항목은 어떤가요? 아무문제 없이 겹치도록 설정이 가능합니다. <code>grid-area</code>를 사용하여 두번째 영역을 아직 물이 없는 당근영역에 포함시키세요.</p>',
      'el': '<p>Τι γίνεται όμως με πολλαπλά αντικείμενα; Μπορείτε να τα επικαλύψετε χωρίς πρόβλημα. Χρησιμοποιήστε το <code>grid-area</code> για να ορίσετε μια δεύτερη περιοχή που καλύπτει όλα τα απότιστα καρότα.</p>',
      'ja': '<p>このように複数のグリッドアイテムを指定する場合は、どうすれば良いのでしょうか？何の問題もなく重ねて指定できます。<code>grid-area</code> を使って2つ目の領域を指定して、まだ水がかかっていないニンジンにも水をやりましょう。</p>',
      'ua': '<p>Як щодо безлічі елементів? Ви можете накладати їх один на одного без будь-яких проблем. Використовуйте <code>grid-area</code> щоб визначити другу зону, яка займе всю не политу моркву.</p>',
      'no': '<p>Hva kan vi gjøre hvis vi har flere elementer? Du kan overlappe dem uten problemer. Bruk <code>grid-area</code> for å definere enda et område som dekker alle gulrøttene som ikke er vannet.</p>',
      'pt-pt': '<p>E que tal múltiplos elementos? Podes sobrepô-los sem qualquer problema. Utiliza <code>grid-area</code> para definir uma segunda área que cubra todas as cenouras ainda por regar.</p>',
      'bg': '<p>Как да се справим с множество от елементи? Можете да ги разположите един над друг без никакви проблеми. Използвайте <code>grid-area</code>, за да дефинирате втора зона, която да покрие всички непокрити моркови с вода.</p>',
      'ca': '<p>I què tal múltiples elements? Pots superposar-los sense cap problema. Utilitza <code>grid-area</code> per definir una segona àrea que cobreixi totes les pastanagues sense regar.</p>',
      'vi': '<p>Khi chúng ta có nhiều đối tượng bên trong grid? Cậu hoàn toàn có thể xếp chồng các đối tượng này lên nhau. Hãy dùng <code>grid-area</code> để định nghĩa thêm một khu vực khác phủ lên vùng trồng cà-rốt đã được tưới nước.</p>',
      'ar': '<p>ماذا عن عناصر متعددة ؟ يمكنك ان تجعل العناصر متتداخلة دون اي مشاكل. استخدم <code>grid-area</code> لتحديد منطقة ثانية تغطي كل الجزر غير المروي</p>',
      'fi': '<p>Entäs, jos meillä on useita elementtejä? Määritykset voivat hyvin mennä päällekkäin. Määritä toinen alue, joka peittää kastelemattomat porkkanat, antamalla <code>grid-area</code>-ominaisuudelle sopiva arvo.</p>',
      'hu': '<p>Mi a helyzet több elem esetén? Minden nehézség nélkül lefedheted őket egymással. Használd a <code>grid-area</code> tulajdonságot, hogy meghatározz egy második területet a megöntözetlen répák területének teljes lefedéséhez!</p>',
      'id': '<p>Bagaiman dengan item yang banyak? Kamu dapat menimpannya tanpa masalah. Gunakan <code>grid-area</code> untuk menentukan area kedua yang mencakup semua wortel yang tidak disiram.</p>',
      'tl': '<p>Paano naman \'pag maramihang items? Pwede mo sila pagpatungin na hindi nagkakaproblema. Gamitin mo ang <code>grid-area</code> para i-define ang ikalawang area ng mga karot na hindi pa nadidiligan.</p>',
      'al': '<p>Si thoni për më shume items? Ju mund ti mbivendosni pa asnjë problem. Përdorni <code>grid-area</code> për të deklaruar një zonë të dytë që mbulon të gjitha karotat e panevojshme.</p>',
    },
    board: 'cc',
    classes: {'#garden > :nth-child(2), #plants > :nth-child(2)': 'grid-column-4'},
    selector: '> :nth-child(1)',
    style: {'grid-area': '2 / 3 / 5 / 6'},
    before: "#garden {\n  display: grid;\n  grid-template-columns: 20% 20% 20% 20% 20%;\n  grid-template-rows: 20% 20% 20% 20% 20%;\n}\n\n#water-1 {\n  grid-area: 1 / 4 / 6 / 5;\n}\n\n#water-2 {\n",
    after: "}"
  },
  {
    name: 'order 1',
    instructions: {
      'en': '<p>If grid items aren\'t explicitly placed with <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code>, etc., they are automatically placed according to their order in the source code. We can override this using the <code>order</code> property, which is one of the advantages of grid over table-based layout.</p><p>By default, all grid items have an <code>order</code> of 0, but this can be set to any positive or negative value, similar to <code>z-index</code>.</p><p>Right now, the carrots in the second column are being poisoned and the weeds in the last column are being watered. Change the <code>order</code> value of the poison to fix this right away!</p>',
      'lv': '<p>Ja gadījumā "grid" elementi nav specifiski novietot ar <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code>, u.c., tie automātiski tiek novietot balsotites uz to oriģinālo kārtību. Taču to var labot, lietojot <code>order</code> metodi. Tā arī ir viena no galvenajām "grid" priekšrocībām attiecībā pret tabulām raksturīgo elementu izvietojumu.</p><p>Sākotnēji visiem "grid" elementiem ir <code>order</code> vērtība 0, bet tā var tikt nomainīta gan uz pozitīvām, gan negatīvām vērtībām, līdzīgi kā <code>z-index</code></p><p>Uz doto brīdi burkāno otrajā kolonnā tiek indēti un nezāles pēdējā kolonā tiek aplaistītas. Atrisin šo problēmu, mainot indes elementu <code>order</code> vērtību.</p>',
      'ro': '<p>Dacă elementele gridului nu sunt așezate explicit in <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code>, etc., sunt automat așezate conform ordinii din codul sursă. Putem suprascrie ordinea folosind proprietatea <code>order</code>, care este unul din avantajele unui layout grid față de un tabel.</p><p>Implicit, toate elementele gridului au proprietatea <code>order</code> setată la 0, dar aceasta poate fi setată la orice valoare pozitivă sau negativă, similar cu <code>z-index</code>.</p><p>Acum, morcovii în a doua coloană sunt otrăviți și buruienile în ultima coloană sunt udate. Schimbă valoarea proprietății <code>order</code> a otravei pentru a repara acest lucru imediat!</p>',
      'zh-cn': '<p>如果网格项不是以<code>grid-area</code>、<code>grid-column</code>、<code>grid-row</code> 等显示的，它们会自动按照它们在源程序中出现的位置摆放。同样我们也可以使用<code>order</code>属性来重写它的顺序，这也是网格布局优于表格布局的好处之一。</p><p>默认情况下，所有的网格项的<code>order</code>都是0，但是顺序也可以被任意设置为正数或者负数，就像<code>z-index</code>一样。</p><p>现在，看到第二列的胡萝卜中毒了并且最后有杂草的那一列也浇了水。现在就改变中毒的网格项的<code>order</code>的值来修复它们吧！</p>',
      'zh-tw': '<p>如果網格項不是以 <code>grid-area</code>、<code>grid-column</code>、<code>grid-row</code> 等顯示的，它們會自動按照其在原始碼中出現的位置擺放。我們也可以使用 <code>order</code> 屬性來重寫它的順序，這也是網格佈局優於表格佈局的好處之一。</p><p>默認情況下，所有的網格項的 <code>order</code> 都是 0，但是順序也可以被任意設置為正數或者負數，就像 <code>z-index</code> 一樣。</p><p>現在，看到第二行的胡蘿蔔中毒了並且最後有雜草的那一行也澆了水。現在就改變中毒的網格項的 <code>order</code> 值來修復它們吧！</p>',
      'tr': '<p>Grid öğeleri açık bir şekilde <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code>, vb. ile yerleştirilmedi ise, kaynak koddaki sıralarına göre otomatik olarak yerleştirlirler. <code>order</code> özelliğini kullanarak otomatik olanı geçersiz kılabiliriz ki bu; Grid\'in, tablo temelli düzenler üzerindeki önemli avantajlarından biridir.</p><p>Varsayılan olarak tüm grid öğelerinin <code>order</code> özelliği 0\'dır fakat bu <code>z-index</code> özelliğindeki gibi herhangi bir pozitif veya negatif değere ayarlanabilir.</p><p>Şu anda, ikinci sütundaki havuç zehirleniyor ve son sütundaki yabani otlar sulandırılıyor. Bunu hemen düzeltmek için zehrin <code>order</code> değerini değiştirin!</p>',
      'fr': '<p>Si les éléments de la grille ne sont pas explicitement positionnés avec <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code>, etc., ils sont automatiquement positionnés selon leur ordre dans le code source. Nous pouvons remplacer ceci en utilisant la propriété <code>order</code>, c\'est l\'un des avantages de la grille par rapport à la mise en page basée sur une table.</p><p>Par défaut, tous les éléments de la grille ont <code>order</code> à 0, mais cela peut être défini sur n\'importe quelle valeur positive ou négative, c\'est similaire à <code>z-index</code>.</p><p>À l\'heure actuelle, les carottes dans la deuxième colonne sont empoisonnées et les mauvaises herbes dans la dernière colonne sont arrosées. Changez la valeur de <code>order</code> du poison pour résoudre ce problème immédiatement !</p>',
      'de': '<p>Wenn Rasterelemente nicht explizit mit <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code>, etc. platziert werden, werden sie automatisch platziert gemäß ihrer Reihenfolge im Quellcode. Wir können das mit der <code>order</code> Eigenschaft überschreiben, was einer der Vorteile von Grids gegenüber Tabellen-basierten Layouts ist.</p><p>Standardmäßig haben alle Rasterelemente einen <code>order</code> Wert von 0, dieser kann aber auf jeden positiven oder negativen Wert gesetzt werden, ähnlich wie <code>z-index</code>.</p><p>Im Moment werden die Karotten in der zweiten Spalte vergiftet und das Unkraut in der letzten Spalte wird gewässert. Ändere den <code>order</code> Wert von Gift ("poison"), um dies gleich in Ordnung zu bringen!</p>',
      'nl': '<p>Als griditems niet expliciet zijn geplaatst met <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code>, etc., worden ze automatisch geplaatst aan de hand van hun volgorde in de broncode. Deze volgorde kunnen we overschrijven met de <code>order</code> property, wat één van de voordelen van grid is ten opzichte van tabelgebasseerde lay-outs.</p><p>Standaard hebben alle griditems een <code>order</code> van 0, maar dit kan naar elke positieve of negatieve waarde worden gezet, net als bij <code>z-index</code>.</p><p>Op dit moment worden de wortels in de tweede kolom vergiftigd, en krijgt het onkruid in de laatste kolom water. Verander de <code>order</code> waarde van het vergif om dit direct op te lossen!</p>',
      'pt-br': '<p>Se um item da grade não é explicitamente colocada com <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code>, etc., eles são colocados automaticamente de acordo com a ordem no código fonte. A gente pode mudar isso usando a propriedade <code>order</code>, que é uma das vantagens das grades ao invés de leiautes baseados em tabelas.</p><p>Por padrão, todos os itens da grade tem um <code>order</code> de 0, mas isso pode ser definido para qualquer valor positivo ou negativo, similar a <code>z-index</code>.</p><p>Nesse momento, as cenouras da segunda coluna estão sendo envenenadas e as ervas daninhas da última coluna estão sendo irrigadas. Altere o valor <code>order</code> do veneno para deixar isso na ordem certa!</p>',
      'ru': "<p>Если grid-элементы не имеют конкретного расположения с <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code> и т.д., они автоматически размещаются, следуя порядку, написанному в коде. Мы можем изменить это с помощью свойства <code>order</code>, которое является одним из преимуществ CSS Grid Layout перед табличной разметкой.</p><p>Изначально все grid-элементы имеют <code>order</code>, равный <code>0</code>, но этому свойству можно присвоить любое положительное или отрицательное значение, примерно как у <code>z-index</code>.</p><p>Сейчас морковь во втором столбце отравлена и сорняки в последнем столбце поливаются. Измените значение свойства <code>order</code> для яда, чтобы исправить это прямо сейчас!</p>",
      'pl': '<p>Jeżeli elementy nie są jednoznacznie umiejscowione w grid przez <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code>, itd., są one automatycznie umiejscowione według kolejności jaka znajduje się w kodzie źródłowym. Możemy to nadpisać z użyciem właściwości <code>order</code>, co jest jedną z zalet układu grid nad układem table.</p><p>Domyślnie, wszystkie elementy grid mają wartość <code>order</code> ustawioną na 0, ale może to zostać ustawione na dowolną liczbę dodatnią lub ujemną, podobnie do atrybutu <code>z-index</code>.</p><p>Teraz, marchewki w drugiej kolumnie są traktowane trucizną, a chwasty w ostatniej kolumnie są podlewane. Zmień wartość <code>order</code> trucizny, aby naprawić to jak najszybciej!</p>',
      'es': '<p>Si los elementos de la cuadrícula no se sitúan explícitamente con <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code>, etc., se sitúan automáticamente de acuerdo al orden en el código fuente. Puedes sobrescribir esto usando la propiedad <code>order</code>, que es una de las ventajas de la cuadrícula frente al diseño basado en tablas.</p><p>Por defecto, el valor de <code>order</code> de todos los elementos es igual a 0, pero puede ser establecido a cualquier valor positivo o negativo, de manera similar a <code>z-index</code>.</p><p>Ahora mismo, las zanahorias en la segunda columna están siendo envenenadas y las malas hierbas en la última columna, regadas. !Cambia el valor de <code>order</code> del veneno para solucionar esto!</p>',
      'sv': '<p>Ifall grid element inte är specifikt satta med <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code> etc., så är dom automatiskt placerade enligt hur dom kommer i källkoden. Vi kan skriva över detta genom att använda egenskapen <code>order</code>, vilket är en av CSS Grid’s stora fördelar.</p><p>Som standard har alla grid element ett <code>order</code> värde av 0, men det kan sättas till positiva eller negativa värden likt <code>z-index</code>.</p><p>Just nu blir morötterna i andra kolumnen förgiftade medan ogräset i sista kolumnen blir vattnade! Ändra <code>order</code> av giftet för att fixa det här.</p>',
      'fa': '<p>اگر آیتم های گرید با استفاده از  <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code> و... جابجا نشده باشند , به صورت خودکار با توجه به ترتیبشان در سورس کد قرار داده می شوند. می توان این چیدمان را با استفاده از  <code>order</code> که یکی از برتری های گرید نسبت به جدول بندی می  باشد, تغییر داد.</p><p>به طور پیش فرض,  <code>order</code> برای همه ی آیتم های گرید مقدار 0 می باشد, اما می توان مقادیر مثبت یا منفی به آن نسبت داد, همانند  <code>z-index</code>.</p><p>در حال حاضر, هویج ها در ستون دوم سمپاشی و علف های هرز در ستون آخر آبیاری می شوند. مقدار <code>order</code> را طوری تغییر دهید که این مشکل را برطرف کند!</p>',
      'it': '<p>Se gli elementi non sono esplicitamente posizionati con <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code>, ecc., sono automaticamente disposti secondo il loro ordine all\'interno del codice. È possibile sovrascrivere questo ordine usando la proprietà <code>order</code>, che è anche un dei vantaggi di usare CSS grid invece che layout basati su tabelle.</p><p>Di default, ogni elemento della griglia ha <code>order</code> uguale a 0, ma può essere settato a qualsiasi valore, positivo o negativo, in modo analogo a <code>z-index</code>.</p><p>In questo caso, il diserbante (poison) sta venendo dato alle carote e invece le erbacce stanno venendo innaffiate. Cambia l\'<code>order</code> degli elementi per sistemare le cose il prima possibile!</p>',
      'ko': '<p>그리드 요소들이 <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code>, 기타 등을 사용하지 않고, 표시될 경우 소스코드에 기입된 순서대로 표기됩니다. table 레이아웃에 비해 grid 시스템의 장점인 <code>order</code> 속성을 이용하면 이를 재정의가 가능합니다.</p><p>기본적으로, 그리드의 모든 요소들은 <code>order</code>의 값이 0이지만, <code>z-index</code>와 같이 양수와 음수의 값 모두 설정이 가능합니다.</p><p>지금 바로, poison의 <code>order</code>를 변경하여 두번째 열에 있는 당근에 물을 주고 마지막 열에 있는 잡초를 제거하세요.</p>',
      'el': '<p>Αν τα αντικείμενα του πλέγματος δεν είναι ρητά τοποθετημένα με τα <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code>, κ.α., τοποθετούνται αυτόματα σύμφωνα με την σειρά τους στον πηγαίο κώδικα. Μπορούμε να παρακάμψουμε αυτό χρησιμοποιώντας την ιδιότητα <code>order</code>, που είναι ένα από τα πλεονεκτήματα του πλέγματος σε σχέση με μία βασισμένη σε πίνακα διάταξη.</p><p>Από προεπιλογή, όλα τα αντικείμενα του πλέγματος έχουν ένα <code>order</code> ίσο με 0, αλλά αυτό μπορεί να οριστεί ως μία οποιαδήποτε θετική ή αρνητική αξία, παρόμοια με το <code>z-index</code>.</p><p>Αυτή την στιγμή, τα καρότα στην δεύτερη στήλη δηλητηριάζονται και τα ζιζάνια στην τελευταία στήλη ποτίζονται. Αλλάξτε την αξία του <code>order</code> του δηλητηρίου για να το διορθώσετε αυτό αμέσως!</p>',
      'ja': '<p>特に明示することなくグリットアイテムが <code>grid-area</code>、<code>grid-column</code>、<code>grid-row</code> などで置かれた場合、ソースコードに現れる順番に自動的に置かれます。しかし、<code>order</code> プロパティを使えば、この順序を上書きできます。これがグリッドシステムが table を使ったレイアウトより優れている理由の一つです。</p><p>デフォルトでは、すべてのグリッドアイテムの <code>order</code> は 0 ですが、<code>z-index</code> と同じように正または負の値を自由に設定できます。</p><p>今、2列目にあるニンジンが毒に侵されていて、最後の列にある雑草に水がやられています。今すぐ <code>order</code> の値を変えて、この状況を正しましょう！</p>',
      'ua': "<p>Якщо grid елементи не мають конкретного розташування з <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code> і т.д., вони автоматично розміщуються слідуючи порядку написаному в коді. Ми можемо перезаписати це за допомогою властивості <code>order</code>, яке є одним з переваг grid'а перед табличною розміткою.</p><p>За замовчуванням, всі grid елементи мають <code>order</code> рівний 0, але цій властивості можна привласнити будь-яке позитивне або негативне значення, приблизно як <code>z-index</code>.</p><p>На даний момент, морква у 2-му стовпці отруєна і бур'яни в останньому стовпці поливаються. Змініть значення властивості <code>order</code> отрути, щоб виправити це прямо зараз!</p>",
      'no': '<p>Hvis gridelementer ikke er tydelig plassert med <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code>, osv., blir de plassert automatisk i henhold til rekkefølgen i kildekoden. Vi kan overskrive dette med egenskapen <code>order</code>, som er en av de store fordelene CSS grid har sammenlignet med tabellbaserte layouts.</p><p>Som standard har alle gridelementer en <code>order</code>-verdi på 0, men dette kan endres til en hvilken som helst positiv eller negativ verdi, mye likt som <code>z-index</code>.</p><p>For øyeblikket, blir gulrøttene i den andre kolonnen forgiftet og ugresset i den siste kolonnen blir vannet. Endre verdien til <code>order</code> for å fikse dette med en gang!</p>',
      'pt-pt': '<p>Se os elementos da grelha não forem explicitamente colocados com <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code>, etc., serão automaticamente colocados de acordo com a ordem no código-fonte. Podemos sobrepor esta regra utilizando a propriedade <code>order</code>, a qual é uma das vantagens de layouts baseados em \'CSS Grid\' ao invés de tabelas!</p><p>Por defeito, todos os elementos da grelha têm uma <code>order</code> de 0, mas esta pode ser estabelecida com qualquer valor positivo ou negativo, semelhante a <code>z-index</code>.</p><p>Neste momento, as cenouras na segunda coluna estão a ser envenenadas e as ervas daninhas na última coluna estão a ser regadas. Altera o valor da <code>order</code> do veneno para solucionar isto!</p>',
      'bg': '<p>Ако grid-елементите не са експлицитно разположени с <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code>, и т.н., те автоматично се подреждат според реда им в кода. Ние може дам пренапишем тази функционалност използвайки <code>order</code> свойството, което е едно от предимствата да се използва CSS grid пред табличните laytout-и.</p><p>По подразбиране всички grid-елементи притежават <code>order</code> равен на 0, но това може да бъде променено на всяко едно позитивно или негативно число, подобно на <code>z-index</code>.</p><p>В момента, морковите във втората колона биват отравяни, а плевелите са поляти с вода. Променете <code>order</code> стойността на отровата, така че да поправите това!</p>',
      'ca': '<p>Si els elements de la quadrícula no se situen explícitament amb <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code>, etc., se situen automàticament segons l\'ordre que tenen al codi font. Pots sobreescriure\'l utilitzant la propietat <code>order</code>, que és un dels avantatges de la quadrícula envers al disseny basat en taules.</p><p>Per defecte, el valor de <code>order</code> de tots els elements és igual a 0, però pot ser establert amb qualsevol valor positiu o negatiu, de manera similar a <code>z-index</code>.</p><p>Ara mateix, les pastanagues de la segona columna estan sent enverinades i les males herbes de l\'última columna regades. Canvia el valor de <code>order</code> del verí per solucionar-ho!</p>',
      'vi': '<p>Nếu các đối tượng bên trong grid không được xác định vị trí bằng <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code>, vv., chúng sẽ được tự động sắp xếp theo đúng thứ tự trong code. Chúng ta cũng có thể thiết lập lại thứ tự này bằng thuộc tính <code>order</code>, đây cũng là một trong những lợi thế của grid so với các layout dựa trên table khác.</p><p>Mặc định, tất cả các đối tượng bên trong grid sẽ có <code>order</code> bằng 0, nhưng chúng ta vẫn có thể gán bằng một giá trị số khác, có thể là số âm hoặc dương, tương tự như với <code>z-index</code>.</p><p>Bây giờ, cà-rốt của chúng ta ở cột thứ 2 đang bị nhiễm độc, trong khi cỏ dại ở côt cuối lại đang được tưới nước. Hãy thay đổi giá trị <code>order</code> để cứu lấy cà-rốt!</p>',
      'ar': '<p>اذا لم يتم تعيين مكان عناصر الجريد بشكل صريح باستخدام <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code>, الخ..., فيتم وضعها تلقائية وفقاً لترتيبها في الكودز يمكنك تجاوز هذا باستخدام خاصية  <code>order</code> , وهي احدى مزايا الجريد على استخدام الجداول لعمل تخطيط.</p><p> بشكل افتراضي, جميع عناصر الشبكة تمتلك <code>order</code> بقيمة 0, ولكن يمكن تعيين هذه القيمة الى اي قيمة سالبة او موجبة, شبيه لـ<code>z-index</code></p><p>, في الوقت الحالي, يتم تسميم اجزر في العمود الثاني ويتم سقي الاعشاب الضارة في العمود الاخير. قم بتغيير قيمة <code>order</code> الخاصة بالسم لاصلاح ذلك على الفور</p>',
      'fi': '<p>Jos ruudukkoelementeille ei erikseen määritetä sijaintia ominaisuuksien <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code> jne. avulla, ne asetellaan automaattisesti siinä järjestyksessä kuin ne ovat lähdekoodissa. Voimme ohittaa tämän määrittämällä <code>order</code>-ominaisuuden, mikä on yksi grid-asettelun eduista verrattuna taulukkopohjaiseen asetteluun.</p><p>Oletusarvon mukaan kaikilla ruudukkoelementeillä on <code>order</code>-arvo 0, mutta voit määrittää arvoksi minkä tahansa positiivisen tai negatiivisen kokonaisluvun, vähän <code>z-index</code>-ominaisuuden tapaan.</p><p>Toisessa pystyrivissä olevat porkkanat joutuvat nyt myrkytetyiksi ja viimeisessä pystyrivissä olevat rikkaruohot saavat vettä. Korjaa tilanne äkkiä määrittämällä myrkylle <code>order</code>-arvo!</p>',
      'hu': '<p>Ha a rácselemek nem explicit (előre pontosan meghatározott) módon kerültek megadásra a <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code>, stb. tulajdonságok beállításával, akkor helyüket autómatikusan a forráskódban elfoglalt helyüknek megfelelően foglalják el. Ezt az elrendeződést az <code>order</code> tulajdonság használatával bírálhatjuk felül, ami egy újabb előny a rács javára a tábla alapú elrendezéshez képest.</p><p>Minden elem rendelkezik egy "elhelyezkedés nulla" alapbeállítással <code>order: 0</code>, de ez az érték bármilyen pozitív vagy negatív értékre beállítható hasonlóan, mint a <code>z-index</code>.</p><p>Eddig a második oszlop répáit permeteztük és az utolsó oszlopban található gazt öntöztük. Változtasd meg a permetezés <code>order</code> tulajdonságának értékét, hogy ezt azonnal kijavítsd!</p>',
      'id': '<p>Jika item grid tidak ditempatkan secara eksplisit dengan <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code>, dll., mereka secara otomatis ditempatkan sesuai dengan urutannya di source code. Kita dapat menimpa ini menggunakan properti <code>order</code>, yang merupakan salah satu keuntungan dari grid daripada tata letak berbasis tabel.</p><p>Secara default, semua item grid mempunyai <code>order</code> 0, tetapi ini dapat diatur ke nilai positif atau negatif, mirip dengan <code>z-index</code>.</p><p>Saat ini, wortel di kolom kedua diracuni dan rumput liar di kolom terakhir disiram. Ubah nilai <code>order</code> dari racun untuk segera memperbaiki hal ini!</p>',
      'tl': '<p>Kung ang mga grid item ay hindi explicit na nilagay gamit ang <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code>, etc., automatic na nakalagay sila base sa order nila sa source code. Pwede natin itong i-override gamit ang property na <code>order</code>, na isa sa mga advantage ng grid sa layout na nakabase sa table.</p><p>Lahat ng grid item ay may <code>order</code> na may default value na 0, pero pwede ito i-set sa kahit anong positive o negative na value, kagaya sa <code>z-index</code>.</p><p>Sa ngayon, nalalason \'yung mga karot sa ikalawang column at nadidiligan naman \'yung mga damo sa huling column. Baguhin mo ang value ng <code>order</code> ng lason para maayos mo ito agad!</p>',
      'al': '<p>Nëse grid items nuk janë vendosur në menyrë ekspicite brenda <code>grid-area</code>, <code>grid-column</code>, <code>grid-row</code>, etj., ato do të vendosen automatikisht në perkatësi të rregullit të tyre në source code. Ne mund ta shkelim këtë me <code>order</code>, e cila është një nga avantazhet e grid mbi shtrirjet table-based.</p><p>Si fillim, të gjithë grid items kanë një <code>order</code>  0, po kësaj mund ti jepet çdo vlerë pozitive apo negative, njësoj si <code>z-index</code>.</p><p>Tani, karotat në kolonën e dytë po helmohen, dhe shkurret në kolonën e fundit po ujiten. Ndryshoni <code>order</code> vlerën e helmit për të rregulluar këtë menjëhere!</p>',
    },
    board: 'cwccc',
    selector: '> :nth-child(2)',
    style: {'order': '2'},
    before: "#garden {\n  display: grid;\n  grid-template-columns: 20% 20% 20% 20% 20%;\n  grid-template-rows: 20% 20% 20% 20% 20%;\n}\n\n.water {\n  order: 0;\n}\n\n#poison {\n",
    after: "}"
  },
  {
    name: 'order 2',
    instructions: {
      'en': '<p>Now the water and poison are alternating, even though all of the weeds are at the start of your garden. Set the <code>order</code> of the poisons to remedy this.</p>',
      'lv': '<p>Tagad ūdens un inde pārklājās, neskatoties uz to, ka visas nezāles ir tava dārza sākumā. Lai to labotu, nomaini indes elementu <code>order</code> vērtību.</p>',
      'ro': '<p>Acum apa și otrava alternează, chiar dacă toate buruienile sunt la începutul grădinii tale. Schimbă valoarea proprietății <code>order</code> a otravei pentru a repara acest lucru.</p>',
      'zh-cn': '<p>现在水和中毒的土地是交替出现的，并且所有的杂草都出现在每一列的开始。设置中毒土地的正确<code>order</code>值来修复它们吧！</p>',
      'zh-tw': '<p>現在水和中毒的土地是交替出現的，並且所有的雜草都出現在每一行的開始。設置中毒土地的正確 <code>order</code> 值來修復它們吧！</p>',
      'tr': '<p>Artık yabani otların hepsi bahçenizin başında olsa da, su ve zehir karışık yerleşmiş durumda. Bunu düzeltmek için zehirlerin <code>order</code> değerlerini ayarlayın.</p>',
      'fr': '<p>Maintenant l’eau et le poison se sont alternés, même si toutes les mauvaises herbes sont au début de votre jardin. Définissez <code>order</code> des poisons pour y remédier.</p>',
      'de': '<p>Nun wechseln sich Wasser und Gift ab, obwohl alles Unkraut sich am Anfang des Gartens befindet. Setze den <code>order</code> Wert für Gift um Abhilfe zu schaffen.</p>',
      'nl': '<p>Nu wisselen het water en het gif af, ook al staat al het onkruid aan het begin van je tuin. Stel de <code>order</code> van het vergif in om dit op te lossen.</p>',
      'pt-br': '<p>Agora a água e o veneno estão alternados, mesmo que todas as ervas daninhas estejam no início da sua horta. Defina a propriedade <code>order</code> do veneno para remediar isso.</p>',
      'ru': '<p>Теперь вода и яд меняются местами, хотя все сорняки находятся в начале сада. Присвойте правильное значение <code>order</code> для яда, чтобы исправить это.</p>',
      'pl': '<p>Teraz woda i trucizna występują na przemian, chociaż wszystkie chwasty są na początku Twojego ogrodu. Ustaw właściwość <code>order</code> trucizny aby temu zaradzić temu.</p>',
      'es': '<p>Ahora el veneno y el agua se alternan, a pesar de que todas las malas hierbas están al comienzo de tu jardín. Cambia el valor de <code>order</code> de los venenos para solucionar esto.</p>',
      'sv': '<p>Nu alternerar gift och vatten även om allt ogräs är på första raden. Sätt <code>order</code> för giftet för att lösa det här.</p>',
      'fa': '<p>حالا آب و سموم با هم جابجا شده اند در حالی که همه ی علف های هرز در ابتدای باغ شما هستند. مقدار <code>order</code> را برای سموم تغییر دهید و چاره ای بیندیشید.</p>',
      'it': '<p>Ora l\'acqua e il diserbante (poison) sono alternati, anche se tutte le erbacce sono all\'inizio del tuo giardino. Imposta l\'<code>order</code> del diserbante per sistemare le cose.</p>',
      'ko': '<p>모든 잡초가 정원의 맨앞에 위치해 있으며, 물과 독은 교대로 위치해 있습니다. poison의 <code>order</code>를 변경하여 정원을 정리해봅시다.</p>',
      'el': '<p>Τώρα το νερό και το δηλητήριο εναλλάσσονται, παρόλο που όλα τα ζιζάνια βρίσκονται στην αρχή του κήπου σας. Ορίστε το <code>order</code> των δηλητηρίων για να το διορθώσετε.</p>',
      'ja': '<p>今度は水と毒の場所が互い違いになっているため、このままでは雑草がガーデン中に広がってしまいます。毒の <code>order</code> を変更してニンジンを回復させましょう。</p>',
      'ua': '<p>Тепер вода і отрута міняються місцями, хоча всі бур\'яни знаходяться на початку саду. Дайте правильне значення <code>order</code> отрути так, щоб виправити це.</p>',
      'no': '<p>Nå alternerer giften og vannet, selv om alt ugresset er i begynnelsen av hagen din. Angi <code>order</code> for å fikse dette.</p>',
      'pt-pt': '<p>Agora a água e o veneno alternam, no entanto todas as ervas daninhas estão no começo da tua horta. Estabelece a <code>order</code> dos venenos para solucionar isto.</p>',
      'bg': '<p>Сега водата и отровата се редуват, въпреки че всички плевели са в началото на Вашата градина. Определете <code>order</code> стойността на отровата, за да предотвратите това.</p>',
      'ca': '<p>Ara el verí i l\'aigua s\'alternen, tot i que totes les males herbes son al começament del jardí. Canvia el valor de <code>order</code> del verí per solucionar-ho.</p>',
      'vi': '<p>Hiện tại nước và chất độc đang xen kẻ nhau. Hãy dùng thuộc tính <code>order</code> để diệt sạch cỏ dại và tước nước cho cà-rốt của mình.</p>',
      'ar': '<p>الان الماء والسم متداخلين على الرغم من ان جميع الاعشاب الضارة موجودة في بداية حديقتك. عين خاصية <code>order</code> الخاصة بالسموم لتصحيح الامر</p>',
      'fi': '<p>Nyt vesi ja myrkky vuorottelevat, vaikka kaikki rikkaruohot ovat puutarhan etureunassa. Ratkaise ongelma määrittämällä myrkylle <code>order</code>-arvo.</p>',
      'hu': '<p>Most a víz és a permet váltják egymást annak ellenére, hogy a gyom a kerted elejében van. Ennek orvoslására állítsd be a permet elrendezését az <code>order</code> tulajdonsággal!</p>',
      'id': '<p>Sekarang air dan racun itu bergantian, meskipun semua rumput liar ada di awal kebunmu. Atur <code>order</code> dari racun untuk memperbaiki hal ini.</p>',
      'tl': '<p>Ngayon naman ay nagsasalitan \'yung mga tubig at \'yung mga lason, pero lahat nung damo ay nasa unahan ng hardin mo. I-set mo ang <code>order</code> ng mga lason para maayos ito.</p>',
      'al': '<p>Tani uji dhe helmi po alternohen, edhe pse gjithë barishtet janë në fillim të kopështit. Vendosni <code>order</code> të helmit për të zgjidhur këtë.</p>',
    },
    board: 'wcwcwcwcwc',
    selector: '> :nth-child(odd)',
    style: {'order': '-1'},
    before: "#garden {\n  display: grid;\n  grid-template-columns: 20% 20% 20% 20% 20%;\n  grid-template-rows: 20% 20% 20% 20% 20%;\n}\n\n.water {\n  order: 0;\n}\n\n.poison {\n",
    after: "}"
  },
  {
    name: 'grid-template-columns 1',
    instructions: {
      'en': '<p>Up to this point, you\'ve had your garden set up as a grid with five columns, each 20% of the full width, and five rows, each 20% of the full height.</p><p>This was done with the rules <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> and <code>grid-template-rows: 20% 20% 20% 20% 20%;</code> Each rule has five values which create five columns, each set to 20% of the overall width of the garden.</p><p>But you can set the grid up however you like. Give <code>grid-template-columns</code> a new value to water your carrots. You\'ll want to set the width of the 1st column to be 50%.',
      'lv': '<p>Līdz šim, tu savu dārzu veidoji kā "no" piecām kolonnām, kas katra aizņēma 20% no platuma un piecām rindām, kas aizņēma 20% no augstuma.</p><p>Tas tika panākts ar <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> un <code>grid-template-rows: 20% 20% 20% 20% 20%;</code>.Katra no šīm 5 vērtībām, izveido 5 kolonnas, kas katra aizņem 20% no kopējās dārza platības. Taču tas nav vienīgais veids kā vari sadalīt savu "grid". Lai aplaistītu savus burkānus, piešķir <code>grid-template-columns</code> jaunas vērtības. Lai visi burkāni būtu aplaistīti, pirmās kolonnas platumam ir jābūt 50%. </p>',
      'ro': '<p>Până în acest punct, ai avut grădina așezată ca un grid cu 5 coloane, fiecare având 20% din lățimea întreagă, și 5 rânduri, fiecare având 20% din înălțimea întreagă.</p><p>Acest lucru a fost făcut cu valorile <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> și <code>grid-template-rows: 20% 20% 20% 20% 20%;</code> Fiecare regulă are 5 valori care creează 5 coloane, fiecare setată la 20% din lățimea grădinii.</p><p>Dar poți să aranjezi grădina cum dorești tu. Schimbă valoarea proprietății <code>grid-template-columns</code> pentru a-ți uda morcovii. Vei dori să setezi lățimea primei coloane la 50%.',
      'zh-cn': '<p>到现在为止，你已经将你的花园设置为5列，每列占总宽度的20%；5行，每行占全部高度的20%。</p><p>这是通过设置<code>grid-template-columns: 20% 20% 20% 20% 20%;</code>和<code>grid-template-rows: 20% 20% 20% 20% 20%;</code>来实现的。每一条规则都有5个值，代表创建了5个列，每一列设置为花园宽度的20%。</p><p>但是你也可以任意设置网格项的宽度。为<code>grid-template-columns</code>设置一个新的值来给你的胡萝卜浇水吧！你想要将第一列的宽度设置为50%。</p>',
      'zh-tw': '<p>到目前為止，你已經將你的花園設置為 5 行，每行佔總寬度的 20%；以及 5 列，每列佔全部高度的 20%。</p><p>這是通過設置 <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> 和 <code>grid-template-rows: 20% 20% 20% 20% 20%;</code> 來實現的。每一條規則都有 5 個值，代表創建了 5 個行，每一行設置為花園寬度的 20%。</p><p>但是你也可以任意設置網格項的寬度。為 <code>grid-template-columns</code> 設置一個新的值來給你的胡蘿蔔澆水吧！你想要將第一行的寬度設置為 50%。</p>',
      'tr': '<p>Bu noktaya kadar bahçe; herbiri tam genişliğin %20\'si olan beş kolondan ve herbiri tam yüksekliğin %20\'si olan beş satırdan oluştu.</p><p>Bu; <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> ve <code>grid-template-rows: 20% 20% 20% 20% 20%;</code> kuralları ile yapıldı. Her bir kural beş kolon yaratan beş adet değerden oluşuyordu ve bunlar Grid\'in toplam genişliğinin %20\'si şeklinde tanımlandı.</p><p>Ancak, tabloyu istediğiniz gibi ayarlayabilirsiniz. <code>grid-template-columns</code> özelliğine yeni bir değer vererek havuçları sulandırın. 1. sütunun genişliğini %50 olarak ayarlamak istersiniz.',
      'fr': '<p>Jusqu\'à présent, vous aviez mis votre jardin dans une grille avec cinq colonnes, chacune ayant une largeur de 20%, et cinq lignes, chacune ayant une hauteur de 20%.</p><p>Cela a été fait avec les règles <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> et <code>grid-template-rows: 20% 20% 20% 20% 20%;</code> Chaque règle comporte cinq valeurs qui créent cinq colonnes, chacune correspond à 20% de la largeur totale du jardin.</p><p>Mais vous pouvez configurer la grille comme vous le souhaitez. Donnez une nouvelle valeur à <code>grid-template-columns</code> pour arroser vos carottes. Vous devez définir la largeur de la 1ère colonne à 50%.',
      'de': '<p>Bis jetzt war dein Garten als Raster von fünf Spalten mit je 20% der Gesamtbreite sowie fünf Reihen mit je 20% der Gesamthöhe angelegt.</p><p>Dies wurde durch die Regeln <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> und <code>grid-template-rows: 20% 20% 20% 20% 20%;</code> bewirkt. Jede dieser Regeln hat fünf Werte, was fünf Spalten erzeugt, jede 20% der Gesamtbreite des Gartens.</p><p>Aber du kannst das Raster so konfigurieren wie du möchtest. Gib <code>grid-template-columns</code> einen neuen Wert um deine Karotten zu wässern. Du solltest die Breite der ersten Spalte auf 50% setzen.',
      'nl': '<p>Tot nu spande je tuin zich uit over een grid met vijf kolommen, elke met een breedte van 20 % van de volledige breedte, en vijf rijen, elke 20 % van de volledige hoogte.</p><p>Dit is gedaan met de regels <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> en <code>grid-template-rows: 20% 20% 20% 20% 20%;</code> Iedere regel had vijf waardes, waardoor vijf kolommen ontstonden, elke ingesteld met 20 % van de gehele tuinbreedte.</p><p>Maar je kan het grid instellen zoals je wilt. Geef <code>grid-template-columns</code> een nieuwe waarde om je planten water te geven. Je wilt dat de eerste kolom een breedte heeft van 50 %.',
      'pt-br': '<p>Até esse ponto, você teve sua horta com uma grade definida com cinco colunas, cada uma com 20% da largura total, e cinco linhas, cada uma com 20% da altura total.</p><p>Isso foi feito com as regras <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> e <code>grid-template-rows: 20% 20% 20% 20% 20%;</code> Cada regra tem cinco valores que criam cinco colunas, que tem 20% do total da largura da sua horta.</p><p>Mas você pode definir a grade da forma que quiser. Dê a <code>grid-template-columns</code> um novo valor para irrigar suas cenouras. Você desejará definir a largura da sua 1ª coluna para 50%.',
      'ru': '<p>До этого момента сад имел grid-сетку с пятью столбцами по 20% ширины и пятью строками, каждая по 20% высоты.</p><p>Это было сделано свойствами <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> и <code>grid-template-rows: 20% 20% 20% 20% 20%;</code> Каждое свойство имеет пять значений, которые создают пять столбцов, где ширина каждого равна 20% от общей ширины сада.</p><p>Но вы можете изменить grid-сетку как вам вздумается. Присвойте <code>grid-template-columns</code> новое значение, чтобы полить морковь. Вам необходимо поставить значение ширины первого столбца равным 50%.</p>',
      'pl': '<p>Do tego pory, twój ogród składał się z siatki z pięcioma kolumnami, każda po 20% pełnej szerokości, i pięciu rzędów, każdy po 20% pełnej wysokości.</p><p>To było zrobione według zasad <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> i <code>grid-template-rows: 20% 20% 20% 20% 20%;</code> Każda zasada ma pięć wartości, które tworzą 5 kolumn - każda z nich tworzy 20% szerokości ogrodu.</p><p>Ale możesz ustawić siatkę w dowolny sposób. Ustaw nową wartość <code>grid-template-columns</code>, aby nawodnić swoje marchewki. Będziesz chciał ustawić szerokość pierwszej kolumny na 50%.',
      'es': '<p>Hasta este momento, has tenido un jardín formado por cinco columnas, cada una ocupando el 20% de la anchura total, y cinco filas, cada una ocupando el 20% de la altura total.</p><p>Esto ha sido establecido con las propiedades <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> y <code>grid-template-rows: 20% 20% 20% 20% 20%;</code>. Cada propiedad tiene cinco valores que crean cinco columnas, cada una establecida al 20% de la anchura total del jardín.</p><p>Pero puedes establecer los valores en la cuadrícula como quieras. Da a <code>grid-template-columns</code> un nuevo valor para regar tus zanahorias. Querrás que la anchura de la primera columna sea del 50%.</p>',
      'sv': '<p>Hittills har du haft din trädgård uppsatt som ett rutnät med fem kolumner där varje kolumn har 20% bredd, och fem rader där varje rad har 20% höjd.</p><p>Det gjordes med <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> and <code>grid-template-rows: 20% 20% 20% 20% 20%;</code> Varje regel har fem värden som skapar fem kolumner.</p><p>Men du kan sätta upp rutnätet precis som du vill. Ge <code>grid-template-columns</code> ett nytt värde för att vattna dina morötter. Du behöver sätta bredden på första kolumnen till 50%.</p>',
      'fa': '<p>تا اینجای کار, باغ شما بصورت یک گرید با 5 ستون که هرکدام 20 درصد پهنای کل و 5 سطر که هرکدام 20 درصد درازای کل بودند, ایجاد شده بود.</p><p>دستورات <code>;grid-template-columns: 20% 20% 20% 20% 20%</code> و <code>;grid-template-rows: 20% 20% 20% 20% 20%</code> این شکل را پدید آورده بودند. هر دستور 5 مقدار دارد که پنج ستونی را که هرکدام 20 درصد پهنای کل باغ هستند را ایجاد می کنند.</p><p> اما می توانید گرید را طوری که دوست دارید تنظیم کنید.مقدار جدیدی به <code>grid-template-columns</code> بدهید که هویج ها را آبیاری کنید. برای این کار باید عرض ستون اول را 50 درصد قرار دهید.',
      'it': '<p>Fino a questo punto, hai avuto a che fare con un giardino diviso in cinque colonne, ognuna larga il 20% della larghezza generale, e cinque righe, ognuna del 20% dell\'altezza.</p><p>Questo è stato impostato tramite <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> e <code>grid-template-rows: 20% 20% 20% 20% 20%;</code> Ogni regola ha cinque valori a definire le cinque colonne, ognuna di grandezza del 20% della larghezza totale del giardino.</p><p>Però tu puoi suddividere la griglia come preferisci. Imposta a <code>grid-template-columns</code> un nuovo valore per innaffiare le tue carote. Prova a settare la larghezza della 1ª colonna a 50%.',
      'ko': '<p>지금까지의 정원은 열(column)과 행(row)이 각각 20% 너비의 5개 요소로 설정되어있습니다.</p><p>이 설정은 <code>grid-template-columns: 20% 20% 20% 20% 20%;</code>과 <code>grid-template-rows: 20% 20% 20% 20% 20%;</code>로 각 속성에는 5개의 열을 만드는 5개 값이 있으며, 각 열은 정원의 20% 너비 설정되었습니다.</p><p>하지만 지금부터는 그리드의 설정을 원하는대로 설정할 수 있습니다. <code>grid-template-columns</code>를 새로운 값을 설정하여 당근에 물을 주세요. 첫번째 열(column)의 넓이를 50%로 설정하세요.',
      'el': '<p>Ως αυτό το σημείο, ο κήπος σας ήταν διαρρυθμισμένος σ\' ένα πλέγμα με πέντε στήλες, η καθεμία 20% του πλήρους μήκους, και πέντε σειρές, η καθεμία 20% του πλήρους ύψους.</p><p> Αυτό γινόταν με τους κανόνες <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> και <code>grid-template-rows: 20% 20% 20% 20% 20%;</code> Κάθε κανόνας έχει πέντε αξίες που δημιουργούν πέντε στήλες, η καθεμία ορισμένη στο 20% του συνολικού μήκους του κήπου.</p><p>Αλλά μπορείτε να διαμορφώσετε το πλέγμα όπως θέλετε. Δώστε στο <code>grid-template-columns</code> μια νέα αξία για να ποτίσετε τα καρότα σας. Θα θελήσετε να θέσετε το μήκος της 1ης στήλης στο 50%.',
      'ja': '<p>さて、今まではガーデンのグリッドは、それぞれ全体の幅の20%の幅を持つ5列と、それぞれ全体の高さの20%の高さを持つ5行がセットアップされていました。</p><p>この設定は <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> と <code>grid-template-rows: 20% 20% 20% 20% 20%;</code> によります。各ルールが5つの列を作る5つの値を持ち、それぞれの値が列の幅をガーデン全体の幅の20%に設定していました。</p><p>しかし、グリッドはどんな値でも自由に設定することができます。<code>grid-template-columns</code> に新しい値を設定して、ニンジンに水をやってみてください。1番目の列の値は50%に設定することになるでしょう。',
      'ua': '<p>До цього моменту ваш сад мав grid сітку з п\'ятьма стовпцями по 20% широти, і п\'ятьма рядками, кожен по 20% висоти.</p><p>Це було зроблено завдяки властивостям <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> і <code>grid-template-rows: 20% 20% 20% 20% 20%;</code> Кожна властивість має п\'ять значень, які створюють 5 стовпців, де ширина кожного дорівнює 20% від загальної широти саду.</p><p>Але ви можете змінювати grid сітку як вам заманеться. Дайте <code>grid-template-columns</code> нове значення, щоб полити вашу моркву. Вам необхідно поставити значення широти 1-го стовпчика  50%.',
      'no': '<p>Hittil har du hatt en hage med et rutenett bestående av fem kolonner på 20% av hele bredden og fem rader på 20% av hele høyden.</p><p>Dette ble definert med reglene <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> og <code>grid-template-rows: 20% 20% 20% 20% 20%;</code> Hver regel har fem verdier som lager fem kolonner på 20% av hele hagebredden.</p><p>Men du kan lage et rutenett akkurat som du vil. Gi <code>grid-template-columns</code> en ny verdi for å vanne gulrøttene dine. Den første kolonnen bør ha en bredde på 50%.',
      'pt-pt': '<p>Até este ponto, a tua horta estava definida como uma grelha com cinco colunas, cada uma com 20% da largura total, e cinco linhas, cada uma com 20% da altura total.</p><p>Tal foi estabelecido através das regras <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> e <code>grid-template-rows: 20% 20% 20% 20% 20%;</code>. Cada regra tem cinco valores que criam cinco colunas, cada uma com 20% da largura total da horta.</p><p>Mas podes definir a grelha como preferires. Atribui um novo valor a <code>grid-template-columns</code> para regar as tuas cenouras. Deverás estabelecer a 1ª coluna com uma largura de 50%.',
      'bg': '<p>До този момент Вие имахте градина разположена в 5 колони от CSS grid-а, всяка по 20% от общата широчина и 5 реда, всеки по 20% от общата височина.</p><p>Това беше така, заради свойствата <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> и <code>grid-template-rows: 20% 20% 20% 20% 20%;</code> Всяко свойство притежава 5 стойности, които създават 5 колони, всяка от по 20% от общата широчина на градината.</p><p>Вие можете да определите как да изглежа Вашият CSS grid. Задайте нови стойности на <code>grid-template-columns</code>, така че да покриете морковите с вода. Задайте широчината на първата колона да бъде 50% от общата широчина.',
      'ca': '<p>Fins ara has tingut un jardí format per cinc columnes, cada una ocupant el 20% de l\'amplada total, i cinc files, cada una ocupant el 20% de l\'alçada total.</p><p>Això ha estat establert amb les propietats <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> i <code>grid-template-rows: 20% 20% 20% 20% 20%;</code>. Cada propietat té cinc valors que creen cinc columnes, cada una establerta al 20% de l\'amplada total del jardí.</p><p>Però pots establir els valors en la quadrícula com vulguis. Dona a <code>grid-template-columns</code> un nou valor per regar les pastanagues. Voldras que l\'amplada de la primera columna sigui del 50%.</p>',
      'vi': '<p>Cho đến hiện tại, chúng ta đang thiết lập khu vườn với 5 cột, mỗi cột chiếm 20% chiều ngang. Và, 5 hàng, mỗi hàng cũng chiếm 20% tổng chiều dọc.</p><p>Điều này được thiết lập dựa vào thuộc tính <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> và <code>grid-template-rows: 20% 20% 20% 20% 20%;</code></p><p>Nhưng cậu có thể thiết lập grid theo như mong muốn của mình. Gán <code>grid-template-columns</code> giá trị mới để tưới nước cho cà-rốt. Cột thứ nhất sẽ chiếm 50% chiều ngang của khu vườn.',
      'ar': '<p>حتى هذه اللحظة, تم اعداد حديقتك على شكل جريد بها خمسة اعمدة, كل 20% من اجمالي العرض وخمسة صفوف, كل 20% من اجمالي الارتفاع</p><p>تم ذلك باستخدام القواعد  <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> و <code>grid-template-rows: 20% 20% 20% 20% 20%;</code> كل قاعدة تحتوي على خمسة قيم تُنشئ خمسة أعمدة ، يتم تعيين كل منها على 20٪ من العرض الكلي للحديقة.</p><p>لكن يمكنك اعداد الجريد كيفما تشاء امنح <code>grid-template-columns</code> قيمة جديدة لري جزرك. سوف تحتاج الى تعيين عرض العمود الاول ليكون 50%</p>',
      'fi': '<p>Tähän asti puutarha on rakentunut viidestä pystyrivistä, joista jokainen on 20 % ruudukon leveydestä, ja viidestä vaakarivistä, joista jokainen on 20 % ruudukon korkeudesta.</p><p>Tämä on saatu aikaan määrittämällä <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> ja <code>grid-template-rows: 20% 20% 20% 20% 20%;</code>. Kummallakin määrityksellä on viisi arvoa, joista syntyy viisi pysty- ja vaakariviä, joiden jokaisen koko on 20 % puutarhan koosta.</p><p>Voit kuitenkin määrittää ruudukon miten haluat. Kastele porkkanat määrittämällä <code>grid-template-columns</code>-ominaisuudelle uusi arvo. Ensimmäisen pystyrivin leveyden tulee olla 50%.',
      'hu': '<p>Eddig a kerted egy öt oszlopos és öt soros rácsként állítottad be, rácsonként 20%-os szélességgel és soronként 20%-os magassággal.</p><p>Ezt a <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> és <code>grid-template-rows: 20% 20% 20% 20% 20%;</code> szabályokkal érted el. Mindegyik szabály öt értékkel rendelkezik, mellyel öt oszlopot és öt sort hoznak létre.</p><p>Azonban a rácsot úgy állíthatod be, ahogy csak akarod. A répák megöntözéséhez adj a <code>grid-template-columns</code> tulajdonságnak új értéket! Az első oszlop értékét 50%-ra akarod beállítani.</p>',
      'id': '<p>Sampai saat ini, kamu telah menyiapkan taman sebagai grid dengan lima kolom, masing-masing 20% dari lebar penuh, dan lima baris, masing-masing 20% dari tinggi penuh.</p><p>Ini dilakukan dengan aturan <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> dan <code>grid-template-rows: 20% 20% 20% 20% 20%;</code> Setiap aturan memiliki lima nilai yang membuat lima kolom, masing-masing diatur ke 20% dari keseluruhan lebar taman.</p><p>Tetapi kamu dapat mengatur grid sesukamu. Berikan <code>grid-template-columns</code> nilai yang baru untuk menyiram wortelmu. Kamu ingin mengatur lebar kolom pertama menjadi 50%.',
      'tl': '<p>Sa puntong \'to, naayos mo na \'yung hardin mo na may limang columns, tig-20% ng buong width, at limang rows, tig-20% ng the buong height.</p><p>Nagawa ito na may rules na <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> at <code>grid-template-rows: 20% 20% 20% 20% 20%;</code> Bawat rule ay may limang values na gumagawa ng limang columns, naka-set ng tig-20% na kabuuang width ng hardin.</p><p>Pero pwede mo naman i-set ang grid sa kagustuhan mo. Bigyan mo ng bagong value ang <code>grid-template-columns</code> para diligan ang mga karot. I-set mo ang width nung unang column ng 50%.',
      'al': '<p>Deri në këtë pike, juve e patët kopështin tuaj si një grid me 5 kolona, secila 20% e gjithë gjerësisë, dhe 5 rrjeshta, secili 20% e gjithë gjatësisë.</p><p>Kjo u bë me rregullat <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> dhe <code>grid-template-rows: 20% 20% 20% 20% 20%;</code> Secili rregull ka pesë vlera të cilat krijojnë pesë kollona, secila 20% e gjithë gjerësisë së kopështit.</p><p>Por juve mund ta vendosni grid sido që të dëshironi. Jepini <code>grid-template-columns</code> një vlerë të re për të ujitur karotat. Ju duhet të vendosni gjerësinë e kolonës së parë 50%.',
    },
    board: 'c',
    style: {'grid-template-columns': '50% 50%'},
    before: "#garden {\n  display: grid;\n",
    after: "  grid-template-rows: 20% 20% 20% 20% 20%;\n}\n\n#water {\n  grid-column: 1;\n  grid-row: 1;\n}"
  },
  {
    name: 'grid-template-columns 2',
    instructions: {
      'en': '<p>Specifying a bunch of columns with identical widths can get tedious. Luckily there\'s a <code>repeat</code> function to help with that.</p><p>For example, we previously defined five 20% columns with the rule <code>grid-template-columns: 20% 20% 20% 20% 20%;</code>. This can be simplified as <code>grid-template-columns: repeat(5, 20%);</code></p><p>Using <code>grid-template-columns</code> with the <code>repeat</code> function, create eight columns each with 12.5% width. This way you won\'t overwater your garden.</p>',
      'lv': '<p>Radīt daudz kolonnas ar vienādiem platumiem ir diezgan nogurdinoši un laikietilpīgi. Par laimi mums ir pieejama <code>repeat</code> funkcija, kas to atvieglos.</p><p>Piemēram, iepriekš, definējot piecas 20% kolonnas, mēs lietojām <code>grid-template-columns: 20% 20% 20% 20% 20%;</code>. Tas var tikt vienkāršots ar  <code>grid-template-columns: repeat(5, 20%);</code></p><p>Lieto <code>grid-template-columns</code> kopā ar <code>repeat</code> funkciju un izveido astoņas kolonnas, kur katra ir 12.5% plata. Šādā veidā tu izvairīsies no sava dārza pārlaistīšanas.</p>',
      'ro': '<p>Să specifici o grămadă de coloane cu lățimi identice poate fi obositor. Din fericire există funcția <code>repeat</code> pentru a te ajuta.</p><p>De exemplu, noi am predefinit 5 coloane de 20% cu <code>grid-template-columns: 20% 20% 20% 20% 20%;</code>. Acest lucru poate fi simplificat cu <code>grid-template-columns: repeat(5, 20%);</code></p><p>Folosind <code>grid-template-columns</code> cu funcția <code>repeat</code>, crează 8 coloane, fiecare cu lățimea de 12.5%. In acest fel nu vei inunda grădina.</p>',
      'zh-cn': '<p>指定一些具有相同宽度的网格项会变得很乏味。幸运的是有<code>repeat</code>函数来帮助我们。</p><p>比如说，之前我们使用<code>grid-template-columns: 20% 20% 20% 20% 20%;</code>属性定义了5列，每列占20%。这可以被简写为：<code>grid-template-columns: repeat(5, 20%);</code></p><p>使用<code>grid-template-columns</code>属性以及<code>repeat</code>函数，创建8列，每列占12.5%的宽度。这样你就不会给花园浇过多的水。</p>',
      'zh-tw': '<p>指定一些具有相同寬度的網格項會變得很乏味。幸運地是有 <code>repeat</code> 函數來幫助我們。</p><p>比如說，之前我們使用 <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> 屬性定義了 5 行，每行佔 20%。這可以被簡寫為：<code>grid-template-columns: repeat(5, 20%);</code></p><p>使用 <code>grid-template-columns</code> 屬性以及 <code>repeat</code> 函數，創建 8 行，每行佔 12.5% 的寬度。這樣你就不會給花園澆過多的水。</p>',
      'tr': '<p>Aynı genişlikte bir grup kolon belirtmek sıkıntıya neden olabilir.</p><p>Neyse ki <code>repeat</code> fonksiyonu bu tarz durumlarda yardım için var.</p><p>Örneğin; daha önce <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> kuralı ile beş adet %20\'lik kolon tanımlamıştık. Bu şu şekilde kısaltılabilir: <code>grid-template-columns: repeat(5, 20%);</code></p><p><code>grid-template-columns</code> ile <code>repeat</code> işlevini kullanarak, her biri % 12.5 genişliğe sahip sekiz kolon oluşturun. Bu şekilde bahçeniz su altında kalmayacaktır.</p> ',
      'fr': '<p>Le fait de spécifier un ensemble de colonnes avec des largeurs identiques peut devenir fastidieux. Heureusement, il y a une fonction <code>repeat</code> pour nous aider.</p><p>Par exemple, nous avons défini précédemment cinq colonnes de 20% avec la règle <code>grid-template-columns: 20% 20% 20% 20% 20%;</code>. Ceci peut être simplifié ainsi <code>grid-template-columns: repeat(5, 20%);</code></p><p>A l\'aide de <code>grid-template-columns</code> avec la fonction <code>repeat</code>, créez huit colonnes avec chacune une largeur de 12.5%. De cette façon, vous ne sur-arrosez pas votre jardin.</p>',
      'de': '<p>Mehrere Spalten mit identischen Breiten anzugeben kann mühsam werden. Zum Glück gibt es eine <code>repeat</code> Funktion, die uns hilft.</p><p>Zum Beispiel haben wir vorher fünf Spalten mit 20% definiert mit der Regel <code>grid-template-columns: 20% 20% 20% 20% 20%;</code>. Dies kann vereinfacht werden zu <code>grid-template-columns: repeat(5, 20%);</code></p><p>Benutze <code>grid-template-columns</code> mit der <code>repeat</code> Funktion um acht Spalten von je 12.5% Breite zu erstellen. So wirst du deinen Garten nicht überwässern.</p>',
      'nl': '<p>Het opgeven van een stel kolommen met identieke breedtes kan vervelend worden. Gelukkig is er een <code>repeat</code>-functie om daarmee te helpen.</p><p>We hebben bijvoorbeeld eerder vijf 20 %-kolommen gedefinieerd met de regel <code>grid-template-columns: 20% 20% 20% 20% 20%;</code>. Dat kan vereenvoudigd worden naar <code>grid-template-columns: repeat(5, 20%);</code></p><p>Gebruik <code>grid-template-columns</code> met de <code>repeat</code>-functie, maak acht kolommen met ieder een breedte van 12.5 %. Op deze manier zal je tuin niet te veel water krijgen.</p>',
      'pt-br': '<p>Especificar um monte de colunas com larguras idênticas pode ficar tedioso.  Felizmente há uma função <code>repeat</code> para nos ajudar com isso.</p><p>Por exemplo, definimos anteriormente cinco colunas de 20% de largura na regra <code>grid-template-columns: 20% 20% 20% 20% 20%;</code>. Isso pode ser simplificado como <code>grid-template-columns: repeat(5, 20%);</code></p><p>Usando <code>grid-template-columns</code> com a função <code>repeat</code>, crie oito colunas com 12.5% de largura cada. Dessa forma você não vai imundar sua horta.</p>',
      'ru': '<p>Определять несколько столбцов с одинаковой шириной может быть утомительно. К счастью, есть функция <code>repeat</code>, которая призвана помочь в этом.</p><p>Например, раньше мы определяли пять столбцов по 20% ширины с помощью <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> Это можно упростить до <code>grid-template-columns: repeat(5, 20%)</code>.</p><p>Используя <code>grid-template-columns</code> вместе с функцией <code>repeat</code>, создайте 8 столбцов по 12.5% ширины каждый. Таким образом, вы не будете использовать больше воды, чем нужно.</p>',
      'pl': '<p>Definiowanie wielu kolumn o takiej samej szerokości może być nużące. Na szczęście istnieje funkcja <code>repeat</code>, która może nam w tym pomóc.</p><p>Na przykład, wcześniej zdefiniowaliśmy 5 kolumn o szerokości 20% przy pomocy zasady <code>grid-template-columns: 20% 20% 20% 20% 20%;</code>. To może być uproszczone jako <code>grid-template-columns: repeat(5, 20%);</code></p><p>Używając <code>grid-template-columns</code> z funkcją <code>repeat</code>, stwórz 8 kolumn - każda po 12.5% szerokości. W ten sposób nie przesadzisz z nawodnieniem ogrodu.</p>',
      'es': '<p>Especificar un puñado de columnas con la misma anchura puede ser aburrido. Afortunadamente hay una función <code>repeat</code> que te ayudará con eso.</p><p>Por ejemplo, previamente hemos definido cinco columnas al 20% de anchura mediante <code>grid-template-columns: 20% 20% 20% 20% 20%;</code>. Esto puedes simplificarse como <code>grid-template-columns: repeat(5, 20%);</code></p><p>Usando <code>grid-template-columns</code> con la función <code>repeat</code>, crea ocho columnas, cada una con una anchura del 12.5%. De esta manera no inundarás tu jardín.</p>',
      'sv': '<p>Att specifiera ett gäng kolumner med samma värden kan kännas lite redundant. Det finns en <code>repeat</code> funktion som hjälper med detta.</p><p>Till exempel, tidigare angav vi fem kolumner med 20% bredd med <code>grid-template-columns: 20% 20% 20% 20% 20%;</code>. Vi kan förenkla genom att använda: <code>grid-template-columns: repeat(5, 20%);</code>.</p><p>Använd nu <code>grid-template-columns</code> med <code>repeat</code> funktionen för att sätta kolumnerna till 12.5% bredd. På så sätt vattnar vi inte där vi inte behöver.</p>',
      'fa': '<p>تعریف کردن تعدادی ستون با عرض یکسان خسته کننده است. خوشبختانه کلمه کلیدی <code>repeat</code> این امر را ساده می کند.</p><p>برای مثال, قبلا پنج ستون با عرض 20 درصد را با استفاده از<p> <code>;grid-template-columns: 20% 20% 20% 20% 20%</code> تعریف کرده بودیم. این دستور به شکل <code>grid-template-columns: repeat (5, 20%)</code>قابل ساده سازی است.  </p><p>با استفاده از <code>grid-template-columns</code> با کلمه کلیدی <code>repeat</code>, هشت ستون هریک به عرض 12.5 درصد بسازید. به این روش از آبیاری بیش از حد باغ خود جلوگیری کنید.</p>',
      'it': '<p>Specificare una serie di colonne con la stessa larghezza può essere stancante. Fortunatamente c\'è una funzione <code>repeat</code> per fare questo.</p><p>Per esempio, precedentemente abbiamo definito cinque colonne di larghezza 20% con <code>grid-template-columns: 20% 20% 20% 20% 20%;</code>. Questo può essere semplificato con <code>grid-template-columns: repeat(5, 20%);</code></p><p>Usa <code>grid-template-columns</code> con la funzione <code>repeat</code>, crea otto colonne ognuna con larghezza 12.5%. In questo modo non sprecherai acqua innaffiando inutilmente parti del giardino senza carote.</p>',
      'ko': '<p>동일한 너비의 열(column)들을 지정할려면 불편할 수 있습니다. 다행스럽게도 a <code>repeat</code> 함수가 이 문제를 해결해줍니다.</p><p>예를 들면, <code>grid-template-columns: 20% 20% 20% 20% 20%;</code>와 같이 이전에는 설정했었지만, <code>grid-template-columns: repeat(5, 20%);</code>와 같이 설정해도 동일합니다.</p><p><code>grid-template-columns</code>과 함께 <code>repeat</code> 함수를 사용하여, 8개의 12.5% 동일한 너비를 가진 열을 만들어보세요. 이렇게하면 당신은 물을 더 낭비하지 않게됩니다.</p>',
      'el': '<p>Ο προσδιορισμός μιας σειράς στηλών με ταυτόσημα μήκη μπορεί να γίνει κουραστικός. Ευτυχώς υπάρχει η λειτουργία <code>repeat</code> για να βοηθήσει σ\' αυτό.</p><p>Λόγου χάρη, προηγουμένως ορίσαμε πέντε στήλες 20% με τον κανόνα <code>grid-template-columns: 20% 20% 20% 20% 20%;</code>. Αυτό μπορεί να απλοποιηθεί ως <code>grid-template-columns: repeat(5, 20%);</code></p><p>Χρησιμοποιώντας το <code>grid-template-columns</code> με την λειτουργία <code>repeat</code>, δημιουργήστε οκτώ στήλες καθεμία με μήκος 12.5%. Έτσι δεν θα παραποτίσετε τον κήπο σας.</p>',
      'ja': '<p>全く同じ幅の列を大量に書くのはうんざりしてしまうかもしれませんね。ラッキーなことに <code>repeat</code> 関数というものがあって、簡単に書くことができます。</p><p>たとえば、これまで同じ 20% 幅の5つの列 <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> を書いていました。この指定は、<code>grid-template-columns: repeat(5, 20%);</code> という書き方で簡単にかけます。</p><p>それでは、<code>grid-template-columns</code> で <code>repeat</code> 関数を使って、12.5% の幅の8つの列を作ってみましょう。そうすれば、これ以上水を無駄にせずに済みます。</p>',
      'ua': '<p>Визначати декілька стовпців з однаковою широтою може бути трохи виснажливим. На щастя, є функція <code>repeat</code> яка покликана допомогти з цим.</p><p>Наприклад, раніше ми визначили п\'ять стовпців по 20% широти за допомогою <code>grid-template-columns: 20% 20% 20% 20% 20%;</code>. Це можна спростити до <code>grid-template-columns: repeat(5, 20%);</code></p><pВикористовуючи <code>grid-template-columns</code> разом з функцією <code>repeat</code>, створіть 8 стовпців по 12.5% широти кожен. Таким чином, ви не будете використовувати більше води ніж потрібно.</p>',
      'no': '<p>Det kan bli kjedelig å spesifisere en haug av kolonner med identiske bredder. Heldigvis finnes det en <code>repeat</code>-funksjon som kan hjelpe med dette.</p><p>For eksempel, tidligere definerte vi fem kolonner på 20% med regelen <code>grid-template-columns: 20% 20% 20% 20% 20%;</code>. Dette kan forenkles og skrives som <code>grid-template-columns: repeat(5, 20%);</code></p><p>Lag åtte kolonner med en bredde på 12.5% hver ved bruk av <code>grid-template-columns</code> med <code>repeat</code>-funksjonen. På denne måten overvanner du ikke hagen din.</p>',
      'pt-pt': '<p>Especificar uma data de colunas com larguras idênticas pode tornar-se tedioso. Felizmente existe a função <code>repeat</code> para te ajudar.</p><p>Por exemplo, definimos anteriormente cinco colunas com 20% de largura através da regra <code>grid-template-columns: 20% 20% 20% 20% 20%;</code>. Isto pode simplificar-se como <code>grid-template-columns: repeat(5, 20%);</code></p><p>Utilizando <code>grid-template-columns</code> e a função <code>repeat</code>, cria oito colunas com 12.5% de largura cada. Desta forma não vais inundar a tua horta.</p>',
      'bg': '<p>Задаването на една и съща стойност на множесто от колони е доста досадно. За късмет функцията <code>repeat</code> ще Ви помогне да избегнете това.</p><p>Например, преди дефинирахме пет колони с по 20% широчина, използвайки <code>grid-template-columns: 20% 20% 20% 20% 20%;</code>. Това може да бъде опростено от <code>grid-template-columns: repeat(5, 20%);</code></p><p>използвайки <code>grid-template-columns</code> с функцията <code>repeat</code>, за да създадете осем колони с по 12.5% широчина. Така няма да наводните Вашата градина.</p>',
      'ca': '<p>Especificar diverses columnes amb la mateixa amplada pot ser feixuc. Afortunadament hi ha una funció <code>repeat</code> que t\'ajudarà a fer-ho automàticament.</p><p>Per exemple, anteriorment hem definit cinc columnes al 20% d\'amplada mitjançant <code>grid-template-columns: 20% 20% 20% 20% 20%;</code>. Això pot simplificar-se com <code>grid-template-columns: repeat(5, 20%);</code></p><p>Utilitzant <code>grid-template-columns</code> amb la funció <code>repeat</code>, crea vuit columnes, cada una amb una amplada del 12.5%. D\'aquesta manera no inundaras el jardí.</p>',
      'vi': '<p>Việc xác định số lượng các cột cùng chiều rộng có thể trở nên nhàm chán. Thay vào đó, chúng ta có thể dùng phương thức <code>repeat</code>.</p><p>Ví dụ, trước đây chúng ta đã định nghĩa 5 cột, mỗi cột chiếm 20% chiều rộng bằng thuộc tính <code>grid-template-columns: 20% 20% 20% 20% 20%;</code>. Một cách khác đơn giản hơn là: <code>grid-template-columns: repeat(5, 20%);</code></p><p>Hãy sử dụng <code>grid-template-columns</code> kết hợp với phương thức <code>repeat</code>, để tạo ra 8 cột, mỗi cột chiếm 12.5% chiều rộng.',
      'ar': '<p>قد يكون تحديد مجموعة من الاعمدة التي تمتلك قيم عروض متطابقة امر شاقا. لحس الحظ هنالك وظيفة (function) <code>repeat</code> للمساعدة في هذا.</p><p>على سبيل المثال, حددنا سابقا&nbsp خمسة اعمدة 20% باستخدام القاعدة <code>grid-template-columns: 20% 20% 20% 20% 20%</code> يمكن تبسيط هذا باستخدام <code>grid-template-columns: repeat(5, 20%)</code></p><p>باستخدام <code>grid-template-columns</code> مع <code>repeat</code> &nbspانشئ ثمانية اعمدة كل منها لديه عرض 12.5% بهذه الطريقة لن تغمر حديقتك.</p>',
      'fi': '<p>On melko pitkästyttävää määrittää monta samanlevyistä pystyriviä. Onneksi <code>repeat</code>-funktio auttaa siinä.</p><p>Esimerkiksi: Aiemmin loimme viisi 20 % -levyistä pystyriviä määrittelemällä <code>grid-template-columns: 20% 20% 20% 20% 20%;</code>. Sen voi lyhentää muotoon <code>grid-template-columns: repeat(5, 20%);</code></p><p>Luo kahdeksan pystyriviä, joista jokaisen leveys on 12.5% määrittämällä <code>grid-template-columns</code>-ominaisuuteen <code>repeat</code>-funktio. Näin et kastele puutarhaasi liikaa.</p>',
      'hu': '<p>Sok azonos szélességű oszlop egyenkénti megadása unalmas lehet. Szerencsére létezik egy <code>repeat</code> (ismétlés) függvény, ami segít ebben.</p><p>Például előzőleg megadtunk öt 20% szélességű oszlopot a <code>grid-template-columns: 20% 20% 20% 20% 20%;</code> szabályt használva. Ez így egyszerűsíthető: <code>grid-template-columns: repeat(5, 20%);</code></p><p>Készíts nyolc, egyenként 12,5% szélességű oszlopot a <code>grid-template-columns</code> és a <code>repeat</code> függvény használatával! Ha így teszel, nem fogod a kerteden túli területet öntözni.</p>',
      'id': '<p>Menentukan sekelompok kolom dengan lebar yang sama bisa menjadi membosankan. Untung ada fungsi <code>repeat</code> untuk membantumu.</p><p>Sebagai contoh, kita sebelumnya mendefinisikan lima kolom 20% dengan aturan <code>grid-template-columns: 20% 20% 20% 20% 20%;</code>. Hal ini bisa lebih diringkas menjadi <code>grid-template-columns: repeat(5, 20%);</code></p><p>Menggunakan <code>grid-template-columns</code> dengan fungsi <code>repeat</code>, buat delapan kolom masing-masing dengan lebar 12,5%. Dengan cara ini kamu tidak akan menyirami tamanmu secara berlebihan.</p>',
      'tl': '<p>Nakakapagod i-specify \'yung mga column na may mga paparehong width. Buti na lang ay may function na <code>repeat</code> para makatulong sa ganun.</p><p>Halimbawa, nag-define tayo kanina ng limang 20% columns na may rule na <code>grid-template-columns: 20% 20% 20% 20% 20%;</code>. Pwede itong pasimplehin nang ganito <code>grid-template-columns: repeat(5, 20%);</code></p><p>Gamit ang <code>grid-template-columns</code> na may function na <code>repeat</code>, gumawa ka ng walong columns na may tig-12.5% na width. Sa ganito ay hindi masosobrahan sa dilig ang garden mo.</p>',
      'al': '<p>Të specifikosh disa gjerësi kolonash me gjerësi identike mund të bëhet e mërzitshme. Për fat të mirë kemi <code>repeat</code> funksion për të ndihmuar me këtë.</p><p>Për shembull, më përpara deklaruam pesë kolona me gjerësi 20% me rregullin <code>grid-template-columns: 20% 20% 20% 20% 20%;</code>. Kjo mund të thjeshtohet si <code>grid-template-columns: repeat(5, 20%);</code></p><p>Duke përdorur <code>grid-template-columns</code> me <code>repeat</code> krijoni tetë kolona secila me gjerësi 12.5%. Ne këtë mënyrë nuk do e përmbysni kopështin tuaj.</p>',
    },
    board: 'c',
    classes: {'#plants': 'grid-template-columns-repeat-8-12'},
    style: {'grid-template-columns': 'repeat(8, 12.5%)'},
    before: "#garden {\n  display: grid;\n",
    after: "  grid-template-rows: 20% 20% 20% 20% 20%;\n}\n\n#water {\n  grid-column: 1;\n  grid-row: 1;\n}"
  },
  {
    name: 'grid-template-columns 4',
    instructions: {
      'en': '<p><code>grid-template-columns</code> doesn\'t just accept values in percentages, but also length units like pixels and ems. You can even mix different units together.</p><p>Here, set three columns to <code>100px</code>, <code>3em</code>, and <code>40%</code> respectively.</p>',
      'lv': '<p><code>grid-template-columns</code> pieņem vērtības ne tikai procentus, bet arī citās garuma vienībās kā pikseļos un "em". Ir pat iespējams jaukt dažādas vērtības kopā.</p><p>Izveido trīs kolonnas ar šādām vērtībām <code>100px</code>, <code>3em</code>, and <code>40%</code>.</p>',
      'ro': '<p><code>grid-template-columns</code> nu acceptă doar valori în procentaje, ci și alte unități in pixeli și ems. Poți chiar să combini diferite unități.</p><p>Aici, setează 3 coloane la <code>100px</code>, <code>3em</code>, and <code>40%</code> respectiv.</p>',
      'zh-cn': '<p><code>grid-template-columns</code>不仅仅只接受百分比的值，也接受像像素或em这样的长度单位。你甚至可以将不同的长度单位混合使用。</p><p>接下来，分别将列的宽度设置为<code>100px</code>、<code>3em</code>和<code>40%</code>。</p>',
      'zh-tw': '<p><code>grid-template-columns</code> 不僅僅只接受百分比的值，也接受像像素或 em 這樣的長度單位。你甚至可以將不同的長度單位混和使用。</p><p>接下來，分別將行的寬度設置為 <code>100px</code>、<code>3em</code> 和 <code>40%</code>。</p>',
      'tr': '<p><code>grid-template-columns</code> sadece yüzdelik değerleri değil aynı zamanda pixel ve em gibi uzunluk birimlerini de kabul ediyor. Hatta farklı birimleri birbirlerine karıştırabilirsiniz.</p><p>Burada üç kolonu sırasıyla <code>100px</code>, <code>3em</code>, ve <code>40%</code> şeklinde ayarlayın.</p>',
      'fr': '<p><code>grid-template-columns</code> n\'accepte pas seulement les valeurs en pourcentage, mais aussi les unités de longueur comme pixels et ems. Vous pouvez même mélanger différentes unités.</p><p>Ici, définissez respectivement trois colonnes à <code>100px</code>, <code>3em</code> et <code>40%</code>.',
      'de': '<p><code>grid-template-columns</code> akzeptiert nicht nur Werte in Prozenten, sondern auch Längeneinheiten wie Pixel und em. Du kannst sogar verschiedene Einheiten zusammen mischen.</p><p>Setze hier drei Spalten auf jeweils <code>100px</code>, <code>3em</code>, und <code>40%</code>.</p>',
      'nl': '<p><code>grid-template-columns</code> accepteert niet alleen waardes in percentages, maar ook lengte-eenheden als pixels en <code>em</code>s. Je kan zelfs verschillende eenheden door elkaar heen gebruiken.</p><p>Maak hier eens drie kolommen met een breedte van respectievelijk <code>100px</code>, <code>3em</code>, en <code>40%</code>.</p>',
      'pt-br': '<p><code>grid-template-columns</code> não aceita apenas valores em porcentagens, mas também aceita unidade de medidas como pixels e ems. Você pode inclusive misturar diferentes unidades junto.</p><p>Aqui, defina três colunas de <code>100px</code>, <code>3em</code>, e <code>40%</code> respectivamente.</p>',
      'ru': '<p><code>grid-template-columns</code> принимает значения не только в процентах, но и в единицах длины, например <code>px</code> или <code>em</code>. Вы даже можете комбинировать разные единицы измерения.</p><p>Присвойте трём столбцам значение <code>100px</code>, <code>3em</code> и <code>40%</code> соответственно.</p>',
      'pl': '<p><code>grid-template-columns</code> nie tylko akceptuje wartości podane w procentach, ale również jednostki takie jak pixele i em-y. Możesz nawet mieszać różne jednostki razem.</p><p>Ustaw odpowiednio wartości trzech kolumn na <code>100px</code>, <code>3em</code> i <code>40%</code>.</p>',
      'es': '<p><code>grid-template-columns</code> no acepta solo valores porcentuales, sino también otras unidades como pixels y ems. Incluso puedes mezclar diferentes unidades a la vez.</p><p>Establece tres columnas a <code>100px</code>, <code>3em</code>, y <code>40%</code> respectivamente.</p>',
      'sv': '<p><code>grid-template-columns</code> tar inte bara värden i procent utan kan använda andra värden som till exempel pixlar och em. Du kan också mixa värden tillsammans.</p><p>Sätt tre kolumner till <code>100px</code>, <code>3em</code> och <code>40%</code>.</p>',
      'fa': '<p><code>grid-template-columns</code> تنها مقادیر را به صورت درصد نمی پذیرد, بلکه واحدهای طول مانند پیکسل و em را نیز می توان به آن تخصیص داد. حتی می توانید واحدهای مختلف را با هم ترکیب کنید.</p><p>در این بخش, سه ستون به ترتیب با مقادیر  <code>3em</code> <code>%40</code> <code>100px</code> ایجاد نمایید.</p>',
      'it': '<p><code>grid-template-columns</code> non accetta solo valori in percentuale, ma anche unità come pixel e em. Puoi anche usare diverse unità allo stesso tempo.</p><p>Ora, imposta tre colonne rispettivamente a <code>100px</code>, <code>3em</code> e <code>40%</code>.</p>',
      'ko': '<p><code>grid-template-columns</code>은 백분율 같은 값뿐만 아니라, 픽셀 및 em과 같은 길이 단위도 허용합니다. 또한 서로 다른 단위를 함께 사용할 수도 있습니다.</p><p>해당 정원에 3개 열을 각각 <code>100px</code>, <code>3em</code> 및 <code>40%</code>로 설정해보세요.</p>',
      'el': '<p>Το <code>grid-template-columns</code> δεν αποδέχεται αξίες μόνο σε ποσοστά, αλλά και σε μονάδες μήκους όπως pixels και ems. Μπορείτε ακόμη και να αναμείξετε διαφορετικές μονάδες μαζί.</p><p>Εδώ, ορίστε τρεις στήλες σε <code>100px</code>, <code>3em</code>, και <code>40%</code> αντίστοιχα.</p>',
      'ja': '<p><code>grid-template-columns</code> が受け取れるのはパーセンテージだけではありません。ピクセルや em などの単位も指定できます。異なる単位を混ぜて使うことさえできます。</p><p>ここでは、3列をそれぞれ <code>100px</code>、<code>3em</code>、<code>40%</code> と指定してみましょう。</p>',
      'ua': '<p><code>grid-template-columns</code> не тільки приймає значення в процентах, але також може приймати значення довжини, такі як пікселі або ems. Ви навіть можете комбінувати різні одиниці виміру.</p><p>Зараз надайте трьом стовпцях значення <code>100px</code>, <code>3em</code> і <code>40%</code> відповідно.</p>',
      'no': '<p><code>grid-template-columns</code> aksepterer ikke bare prosentverdier, men også lengdeenheter som pixler og ems. Du kan også bruke forskjellige enheter samtidig.</p><p>Gi tre kolonner bredder på <code>100px</code>, <code>3em</code>, og <code>40%</code> hver.</p>',
      'pt-pt': '<p>A propriedade <code>grid-template-columns</code> não aceita apenas percentagens, mas também unidades de comprimento como pixels e ems. Podes até misturar diferentes unidades.</p><p>Estabelece três colunas de <code>100px</code>, <code>3em</code>, e <code>40%</code>, respectivamente.</p>',
      'bg': '<p><code>grid-template-columns</code> не приема само проценти за стойности, а и единици за дължина като <code>px</code> и <code>em</code>. Вие дори можете едновременно да използвате различни единици.</p><p>Задайте стойности за три колони, като използвате съответно<code>100px</code>, <code>3em</code> и <code>40%</code>.</p>',
      'ca': '<p><code>grid-template-columns</code> no només accepta valors percentuals, sinó també altres unitats com pixels i ems. Fins i tot pots barrejar diferents unitats a la vegada.</p><p>Estableix tres columnes a <code>100px</code>, <code>3em</code>, i <code>40%</code> respectivament.</p>',
      'vi': '<p><code>grid-template-columns</code> không chỉ nhận vào các giá trị là phần trăm, mà còn nhận vào các đơn vị khác như pixels và ems. Cậu cũng có thể kết hợp chúng với nhau .</p><p>Bây giờ, hãy thiết lập 3 cột với giá trị tương ứng <code>100px</code>, <code>3em</code>, và <code>40%</code>.</p>',
      'ar': '<p><code>grid-template-columns</code> لاتقبل فقط القيم بالنسب المئوية, ولكن ايضا وحدات الطول مثل البكسل و (ems). حتى انه يمكنك مزج وحدات مخلفة معا.</p><p>هنا, قم بتعيين ثلاثة اعمدة ل <code>3em</code>, <code>100px</code>, و <code>40%</code> على التوالي.</p>',
      'fi': '<p>Ominaisuudelle <code>grid-template-columns</code> voi määrittää myös muita kuin prosenttiarvoja: esimerkiksi pituusyksiköitä, kuten px ja em. Voit jopa sekoittaa eri yksiköitä samaan määritykseen.</p><p>Määritä tässä pystyrivien leveyksiksi <code>100px</code>, <code>3em</code> ja <code>40%</code>.</p>',
      'hu': '<p>A <code>grid-template-columns</code> nem csak százalékos értékeket fogad el, hanem hossz egységeket is, mint a pixel és az em. A különböző mértékegységeket akár együtt is használhatod!</p><p>Itt állíts be három oszlopot rendre: <code>100px</code>, <code>3em</code> és <code>40%</code> méretűre!</p>',
      'id': '<p><code>grid-template-columns</code> tidak hanya menerima nilai persen, tetapi juga satuan panjang seperti pixels dan ems. Kamu bahkan dapat mencampur unit yang berbeda bersama-sama.</p><p>Disini, atur tiga kolom menjadi <code>100px</code>, <code>3em</code>, dan <code>40%</code> masing-masing.</p>',
      'tl': '<p>Hindi lang percentages ang tinatanggap na value ng <code>grid-template-columns</code>, pwede rin ang length units na pixels at ems. Pwede mo nga rin pagsamahin ang iba\'t ibang units ay.</p><p>Dito, i-set mo \'yung tatlong columns sa <code>100px</code>, <code>3em</code>, at <code>40%</code> nang magkakasunod.</p>',
      'al': '<p><code>grid-template-columns</code> nuk pranon vetëm vlera me përqindje, por gjithashtu gjatësi si pixel dhe ems. Ju gjithashtu mund të përzieni vlera të ndryshme.</p><p>Këtu, vendosni tre kolonat në <code>100px</code>, <code>3em</code>, dhe <code>40%</code> përkatësisht.</p>',
    },
    board: 'cwc',
    classes: {'#plants': 'grid-template-columns-100px-3em-40p'},
    style: {'grid-template-columns': '100px 3em 40%;'},
    before: "#garden {\n  display: grid;\n",
    after: "  grid-template-rows: 20% 20% 20% 20% 20%;\n}"
  },
  {
    name: 'grid-template-columns 5',
    instructions: {
      'en': '<p>Grid also introduces a new unit, the fractional <code>fr</code>. Each <code>fr</code> unit allocates one share of the available space. For example, if two elements are set to <code>1fr</code> and <code>3fr</code> respectively, the space is divided into 4 equal shares; the first element occupies 1/4 and the second element 3/4 of any leftover space.</p><p>Here, weeds make up the left 1/6 of your first row and carrots the remaining 5/6. Create two columns with these widths using <code>fr</code> units.</p>',
      'lv': '<p>Bez jau nosauktajām vienībām, "grid" piedāvā savu daļas (fr) vienību (angliski "fractional unit"). Katra <code>fr</code> vienība aizņemt kādu daļu no pieejamā laukuma. Piemēram, ja diviem elementiem ir piešķirtas vērtības <code>1fr</code> un  <code>3fr</code>, tad laukums tiek sadalīts 4 vienādās daļās un pirmais element aizņem 1/4 laukuma, bet otrais 3/4 laukuma.</p><p>Šeit, nezāles aizņem 1/6 no tava dārza pirmās rindas un burkāni atlikušās 5/6. Pielietojot <code>fr</code> vienības, izveido divas kolonnas ar iepriekš norādītajiem platumiem<p>',
      'ro': '<p>Grid introduce și o unitate nouă, fracționalul <code>fr</code>. Fiecare unitate <code>fr</code> alocă o parte din spațiul valabil. De exemplu, dacă 2 elemente sunt setate la <code>1fr</code> și <code>3fr</code> respectiv, spațiul este împarțit în 4 părți egale; primul element ocupă 1/4 și al doilea 3/4 din spațiul rămas.</p><p>Aici, buruienile ocupă 1/6 din primul rând și morcovii restul de 5/6. Creează două coloane cu aceste lățimi folosind unitățile <code>fr</code>.</p>',
      'zh-cn': '<p>网格系统也引入了一个新的单位，分数<code>fr</code>。每一个<code>fr</code>单元分配一个可用的空间。比如说，如果两个元素分别被设置为<code>1fr</code>和<code>3fr</code>，那么空间就会被平均分配为4份；第一个元素占据1/4，第二个元素占据3/4。</p><p>这里，杂草占据了你第一行的左1/6，胡萝卜占据着剩下的5/6。创建两个列，并使用<code>fr</code>单位来定义它们的宽度。</p>',
      'zh-tw': '<p>網格系統也引入了一個新的單位，分數 <code>fr</code>。每一個 <code>fr</code> 單位分配一個可用的空間。比如說，如果兩個元素分別被設置為 <code>1fr</code> 和 <code>3fr</code>，那麼空間就會被分為 4 等份；第一個元素佔 1/4，第二個元素佔 3/4。</p><p>這裡，雜草佔據了你第一列的左 1/6，胡蘿蔔則佔了剩下的 5/6。請創建兩個行，並使用 <code>fr</code> 單位來定義它們的寬度。</p>',
      'tr': '<p>Grid ayrıca kesirli, yeni bir birim getiriyor: <code>fr</code>. Her <code>fr</code> birimi, kullanılabilir alanın bir payını tahsis eder. Örneğin, iki öğe sırasıyla <code>1fr</code> ve <code>3fr</code> olarak ayarlandıysa, alan dört eşit paydaya bölünür; ilk eleman 1/4 ve ikinci eleman kalan boşluğun 3/4\'ünü kaplar.</p><p>Burada yabani otlar, ilk sıranın 1/6\'sını, diğer 5/6 alanı ise havuçlar oluşturuyor. <code>fr</code> birimlerini kullanarak bu genişliklere sahip iki sütun oluşturun.</p>',
      'fr': '<p>La grille introduit également une nouvelle unité, le fractionnaire <code>fr</code>. Chaque unité  <code>fr</code> alloue une partie de l\'espace disponible. Par exemple, si deux éléments sont définies respectivement avec <code>1fr</code> et <code>3fr</code>,  l\'espace est divisé en 4 parts égales, le premier élément occupant 1/4 et le deuxième élément 3/4 de l\'espace disponible.</p><p>Ici, les mauvaises herbes représentent 1/6 de votre première ligne et les carottes les 5/6 restants. Créez deux colonnes avec ces largeurs en utilisant les unités <code>fr</code>.</p>',
      'de': '<p>Grid führt auch eine neue Einheit ein, den Bruchteil ("fractional") <code>fr</code>. Jede <code>fr</code> Einheit weist einen Anteil des verfügbaren Platzes zu. Wenn zum Beispiel zwei Elemente auf <code>1fr</code> und <code>3fr</code> gesetzt sind, wird der verfügbare Platz in vier gleich grosse Teile aufgeteilt; das erste Element besetzt 1/4 und das zweite Element 3/4 des restlichen Platzes.</p><p>Hier machen Unkraut 1/6 deiner ersten Reihe aus und Karotten die übrigen 5/6. Erstelle zwei Spalten mit diesen Breiten unter Verwendung von <code>fr</code> Einheiten.</p>',
      'nl': '<p>Grid introduceert ook een nieuwe eenheid, de fractie <code>fr</code>. Iedere <code>fr</code>-eenheid kent één deel van de beschikbare ruimte toe. Bijvoorbeeld wanneer twee elementen respectievelijk <code>1fr</code> en <code>3fr</code> zijn, wordt de ruimte ingedeeld in 4 gelijke delen; het eerste element bezet 1/4 en het tweede element 3/4 van de overgebleven ruimte.</p><p>Hier vormen onkruid de linker 1/6 van je eerste rij en wortels de overige 5/6. Maak twee kolommen met deze breedtes door <code>fr</code>-eenheden te gebruiken.</p>',
      'pt-br': '<p>CSS Grid também introduz uma nova medida, a fracionário <code>fr</code>. Cada medida <code>fr</code> aloca um pedaço do espaço disponível. Por exemplo, se dois elementos estão definidos para <code>1fr</code> e <code>3fr</code> respectivamente, o espaço é dividido em 4 partes iguais; o primeiro elemento ocupa 1/4 e o segundo elemento 3/4 do espaço restante.</p><p>Aqui, ervas daninhas ocupam 1/6 da sua primeira linha e as cenouras os 5/6 restantes. Crie duas colunas com essas larguras usando a unidade <code>fr</code>.</p>',
      'ru': '<p>CSS Grid Layout также вводит новую единицу измерения: дробный <code>fr</code> (англ. <em>fraction</em>). Каждый <code>fr</code> выделяет одну часть свободного пространства. Например, если двум элементам задано <code>1fr</code> и <code>3fr</code> соответственно, то пространство будет поделено на 4 одинаковые части. Первый элемент займет ¼, а второй оставшиеся ¾ пространства.</p><p>Сейчас сорняки занимают левую ⅙ часть вашей первой строки, а морковь оставшиеся ⅚. Создайте два столбца с такой же шириной, используя <code>fr</code>.</p>',
      'pl': '<p>Grid także wprowadza nową jednostkę, ułamek <code>fr</code>. Każda jednostka <code>fr</code> przyporządkowuje jedną część wolnej przestrzeni . Na przykład, jeżeli dwa elementy mają wartości odpowiednio <code>1fr</code> i <code>3fr</code>, przestrzeń jest podzielona na 4 równe części; pierwszy element zajmuje 1/4, a drugi element 3/4 pozostałej przestrzeni.</p><p>Tutaj, chwasty tworzą 1/6 twojego pierwszego wiersza, a marchewki pozostałe 5/6. Stwórz dwie kolumny z tymi długościami używając jednostek <code>fr</code>.</p>',
      'es': '<p>CSS Grid también introduce una nueva medida, la fracción <code>fr</code>. Cada unidad <code>fr</code> asigna una porción del espacio disponible. Por ejemplo, si dos elementos están establecidos a <code>1fr</code> y <code>3fr</code> respectivamente el espacio se divide en 4 porciones iguales; el primer elemento ocupa 1/4 del espacio y el segundo elemento los 3/4 restantes.</p><p>Ahora las malas hierbas ocupan 1/6 de tu primera fila y las zanahorias los restantes 5/6. Crea dos columnas con ese ancho empleando <code>fr</code>.</p>',
      'sv': '<p>CSS Grid introducerar en ny enhet <code>fr</code> som är en fraktion av den tillgängliga ytan. Till exempel, ifall två element är satta till <code>1fr</code> och <code>3fr</code> så är ytan uppdelad i 4 lika delar.</p><p>Nu tar ogräset upp 1/6 av din första rad och morötterna resten, 5/6. Skapa två kolumner med dessa bredder genom att använda <code>fr</code>.</p>',
      'fa': '<p>گرید همچنین یک واحد جدید نیز معرفی می کند, fractional یا <code>fr</code>.  واحدهر <code>fr</code> سهمی از فضای موجود را تخصیص می دهد. برای مثال, اگر به دو عنصر مقادیر <code>1fr</code> و <code>3fr</code> داده شود, فضا به چهار قسمت تقسیم می شود؛ اولین عنصر 1/4 و دومین عنصر 3/4 فضا را اشغال می کنند.</p><p>در اینجا علف های هرز 1/6 سطر اول و هویج ها باقی 5/6 فضا را اشغال می کند. با استفاده از واحد <code>fr</code> دو ستون با این عرض ها ایجاد کنید.</p>',
      'it': '<p>CSS Grid aggiunge una nuova unità di misura, la frazione <code>fr</code>. Ogni <code>fr</code> definisce una frazione dello spazio disponibile. Per esempio, se due elementi sono impostati rispettivamente a <code>1fr</code> e <code>3fr</code>, lo spazione è diviso in 4 parti uguali; il primo elemento occuperà 1/4 e il secondo elemento 3/4 di tutto lo spazio avanzato.</p><p>Qui, le erbacce occupano 1/6 dello spazio della prima riga e le carote il restante 5/6. Crea due colonne con queste dimensioni usando <code>fr</code>.</p>',
      'ko': '<p>또한 Grid는 새로운 단위인 fractional <code>fr</code>를 소개하고 있습니다. 각 <code>fr</code> 단위들은 사용가능한 공간을 하나로 공유하여 할당합니다. 예시로, 두개의 element들을 <code>1fr</code>과 <code>3fr</code>로 설정시, 공간이 4개의 동일한 크기로 공유됩니다. 첫번째 element는 사용가능한 공간의 1/4 크기로 그리고 두번째 element는 3/4 크기를 차지합니다.</p><p>여길보면 잡초가 첫 번째 줄의 1/6를 차지하고 있고 당근은 나머지 5/6를 차지하고 있습니다. <code>fr</code> 단위를 사용하여 이 너비로 두 개의 열을 만들어보세요.</p>',
      'el': '<p>Το CSS Grid επίσης εισάγει μια νέα μονάδα, την κλασματική <code>fr</code>. Κάθε μονάδα <code>fr</code> κατανέμει ένα μερίδιο του διαθέσιμου χώρου. Λόγου χάρη, αν δύο στοιχεία έχουν οριστεί σε <code>1fr</code> και <code>3fr</code> αντίστοιχα, ο χώρος διαιρείται σε 4 ίσα μερίδια; το πρώτο στοιχείο καταλαμβάνει το 1/4 και το δεύτερο στοιχείο τα 3/4 του οιουδήποτε υπόλοιπου διαθέσιμου χώρου.</p><p>Εδώ, τα ζιζάνια αποτελούν το αριστερό 1/6 της πρώτης σας σειράς και τα καρότα τα υπόλοιπα 5/6. Δημιουργήστε δύο στήλες με αυτά τα μήκη χρησιμοποιώντας μονάδες <code>fr</code>.</p>',
      'ja': '<p>CSS グリッドには、新しい単位も導入されました。分数 (fractional) を略した <code>fr</code> という単位です。1つの <code>fr</code> 単位には、残っているスペースの1つが割り当てられます。たとえば、2つの要素がそれぞれ <code>1fr</code> と <code>3fr</code> に設定された場合、まず、残りのスペースの 1/4 の長さが計算されます。そして、最初の要素にはスペースの 1/4 が、2番目には 3/4 が割り当てられます。</p><p>今、1行目のうち、雑草が全体の幅の左 1/6 を埋めていて、残りの 5/6 にニンジンが植えられています。<code>fr</code> 単位を上手く使って、それぞれぴったりの幅を持った2つの列を作ってください。</p>',
      'ua': '<p>Grid також вводить нову одиницю виміру, дробовий <code>fr</code>. Кожен <code>fr</code> виділяє одну частину вільного простору. Наприклад, якщо два елементи мають властивість рівну <code>1fr</code> і <code>3fr</code> відповідно, то тоді простір буде поділено на 4 однакові частини. Перший елемент займе 1/4 а другий 3/4 всього простору, що залишилося.</p><p>Зараз бур\'яни займають ліву 1/6 частину вашого першого рядка, а моркві залишилися 5/6. Створіть два стовпці з такими ж широтами, використовуючи одиниці <code>fr</code>.</p>',
      'no': '<p>CSS grid introduserer også en ny enhet, <code>fr</code>, som står for en brøkdel av den tilgjengelige bredden. For eksempel, hvis to elementer har verdier på <code>1fr</code> og <code>3fr</code> hver, deles plassen opp i fire like deler; det første elementet tar opp 1/4 av plassen og det andre elementet 3/4 av plassen som er igjen.</p><p>Nå tar ugresset opp 1/6 av plassen på den første raden og gulrøttene 5/6 av det som er igjen. Lag to kolonner med disse breddene ved å bruke <code>fr</code>-enheten.</p>',
      'pt-pt': '<p>A CSS Grid também introduz uma nova unidade, o fracionário <code>fr</code>. Cada unidade <code>fr</code> aloca uma porção do espaço disponível. Por exemplo, se dois elementos estão estabelecidos com <code>1fr</code> e <code>3fr</code> respectivamente, o espaço é dividido em 4 porções iguais; o primeiro elemento ocupa 1/4 e o segundo elemento 3/4 do espaço restante.</p><p>Aqui, ervas daninhas ocupam 1/6 da tua primeira linha e as cenouras os 5/6 restantes. Cria duas colunas com estas larguras utilizando a unidade <code>fr</code>.</p>',
      'bg': '<p>CSS grid също въвежда нова единица за измеренията - дробите <code>fr</code>. Всяка <code>fr</code> единица използва една част от свободното пространство. Например, ako два елемента са  <code>1fr</code> и <code>3fr</code> съответно, пространството е разделено на 4 равни части; първият елемент заема 1/4, а вторият заема 3/4 от всяко свободно пространство.</p><p>В случая, плевелите заемат 1/6 от първия ред, а морковите оставащите 5/6. Създайте две колони с тези широчини, използвайки <code>fr</code> едеиници.</p>',
      'ca': '<p>CSS Grid també afegeix una nova mesura, la fracció <code>fr</code>, on cada unitat <code>fr</code> assigna una porció de l\'espai disponible. Per exemple, si dos elements estan establerts a <code>1fr</code> i <code>3fr</code> respectivament, l\'espai es divideix en 4 porcions iguals; el primer element ocupa 1/4 de l\'espai i el segon els 3/4 restants.</p><p>Ara les males herbes ocupen 1/6 de la primera fila i les pastanagues els 5/6 restants. Crea dos columnes amb aquest ample utilitzant <code>fr</code>.</p>',
      'vi': '<p>Grid giới thiệu thêm một đơn vị mới, đó chính là: "fractional" <code>fr</code>. Mỗi đơn vị <code>fr</code> chiếm một phần trên tổng các vùng trống . Ví dụ, nếu 2 đối tượng được gán tương ứng <code>1fr</code> và <code>3fr</code>, không gian sẽ được chia làm 4 phần; đối tượng đầu sẽ chiếm 1/4 và đối tượng thứ 2 chiếm 3/4 phần không gian còn lại bên trái.</p><p>Bây giờ, để cỏ dại chiếm 1/6 và cà-rốt chiếm 5/6. Cậu hãy tạo ra 2 cột với yêu cầu trên sử dụng đơn vị <code>fr</code>.</p>',
      'ar': '<p>الجريد قدمت ايضا وحدة جديدة, وهي<code>fr</code>. كل وحدة&nbsp;<code>fr</code> تخصص حصة واحدة من المساحة المتاحة. على سبيل المثال, اذا تم تعيين عنصرين على&nbsp;<code>1fr</code> و&nbsp;<code>3fr</code> على التوالي, فسيتم تقسيم المساحة الى اربع حصص متساوية; يشغل العنصر الاول 1/4 والعنصر الثاني 3/4 من اي مساحة متبقية,&nbsp;</p><p>هنا, تشكل الحشائش 1/6 المتبقية من الصف الاول و الجزر يشكل ال 5/6 المتبقية. أنشئ عمودين هذه العروض باستخدام وحدات <code>fr</code>.</p>',
      'fi': '<p>Grid-asettelun mukana tulee myös uusi yksikkö <code>fr</code>, joka jakaa jäljellä olevan tilan murto-osiin. Jos esimerkiksi yhdelle elementille on määritetty arvo <code>1fr</code> ja toiselle <code>3fr</code>, jäljellä oleva tila jaetaan neljään yhtä suureen osaan, ja ensimmäinen elementti vie 1/4 ja toinen 3/4 tuosta tilasta.</p><p>Tässä rikkaruohot ovat vallanneet ensimmäisen rivin vasemman reunan 1/6:n leveydeltä ja porkkanat peittävät loput 5/6. Luo kaksi pystyriviä näiden leveyksien perusteella määrittämällä <code>fr</code>-yksiköt.</p>',
      'hu': '<p>A ráccsal egy új mértékegység is bevezetésre került, a részegység <code>fr</code> (fraction). Minden <code>fr</code> egység a rendelkezésre álló hely egy részét foglalja le. Például két, <code>1fr</code> és <code>3fr</code>  méretűre állított elem esetén a rendelkezésre álló hely négy egyforma részre lesz osztva, ahol az első elem 1/4, a második elem pedig 3/4 részre terjed ki.</p><p>Itt a gyom az első sorod bal oldali 1/6 részét, a répa pedig a maradék 5/6 részét teszi ki. Készíts az <code>fr</code> egység segítségével két ilyen oszlopot!</p>',
      'id': '<p>Grid juga memperkenalkan unit baru, pecahan <code>fr</code>. Setiap unit <code>fr</code> mengalokasikan satu bagian dari ruang yang tersedia. Sebagai contoh, jika dua elemen diatur ke <code>1fr</code> dan <code>3fr</code> masing-masing, ruang dibagi menjadi 4 bagian yang sama; elemen pertama menempati 1/4 dan elemen kedua 3/4 dari sisa ruang.</p><p>Di sini, rumput liar terdiri dari 1/6 kiri dari baris pertama kamu dan wortel 5/6 sisanya. Buat dua kolom dengan lebar ini menggunakan satuan <code>fr</code>.</p>',
      'tl': '<p>Nag-introduce din ang Grid ng bagong unit na fractional <code>fr</code>. Bawat <code>fr</code> unit ay naglalaan ng isang bahagi ng available na space. Halimbawa, kung ang dalawang elements ay naka-set sa <code>1fr</code> at <code>3fr</code> nang magkasunod, mahahati sa apat na magkakapantay-pantay na bahagi ang space;\'yung unang element ay sasakupin ang 1/4 at ang ikalawang element ay 3/4 ng anumang natitirang space.</p><p>Dito, nasasakop ng mga damo \'yung kaliwang 1/6 ng unang mong row at ang natitirang 5/6 naman sa mga karot. Gumawa ka ng dalawang columns na may ganitong widths gamit ang <code>fr</code> units.</p>',
      'al': '<p>Grid gjithashtu prezanton një cilësi të re, fraksionin <code>fr</code>. Secila <code>fr</code> cilësi do të zërë një shpërndarje të hapësirës së dhëne. Për shembull, nëse dy elementë janë vendosur si <code>1fr</code> dhe <code>3fr</code> respektivisht, hapësira do të ndahet në katër pjesë të barabarta; elementi i parë do të zërë 1/4 dhe elementi i dytë 3/4 e gjithë pjesës së ngelur.</p><p>Këtu, shkurret zënë të majtën e 1/6 e rrjeshtit tuaj të parë dhe karotat pjesën e ngelur 5/6. Krijoni dy kolona me këto gjerësi duke përdorur <code>fr</code> units.</p>',
    },
    board: 'wc',
    classes: {'#plants': 'grid-template-columns-1fr-5fr'},
    style: {'grid-template-columns': '1fr 5fr;'},
    before: "#garden {\n  display: grid;\n",
    after: "  grid-template-rows: 20% 20% 20% 20% 20%;\n}"
  },
  {
    name: 'grid-template-columns 3',
    instructions: {
      'en': '<p>When columns are set with pixels, percentages, or ems, any other columns set with <code>fr</code> will divvy up the space that\'s left over.</p><p>Here the carrots form a 50 pixel column on the left, and the weeds a 50 pixel column on the right. With <code>grid-template-columns</code>, create these two columns, and use <code>fr</code> to make three more columns that take up the remaining space in between.</p>',
      'lv': '<p>Gadījumos, kad kolonnu izmēri ir uzstādīdi ar pikseļiem, procentiem vai "em" vienībām, citas kolonnas, kuru izmēri ir norādīti ar <code>fr</code> sadalīs atlikušo pieejamo laukumu.</p><p>Šeit burkāni aizņemt 50 pikseļu kolonnu kreisajā pusē, bet nezāles 50 pikseļu kolonnu labajā pusē. Lietojot <code>grid-template-columns</code>, izveido šīs divas kolonnas un pēc tam pielieto<code>fr</code>, lai izveidotu vēl trīs kolonnas, kas aizpilda atlikušo laukumu pa vidu.</p>',
      'ro': '<p>Când coloanele sunt setate în pixeli, procentaj, sau ems, celelalte coloane setate cu <code>fr</code> vor împărți spațiul ocupat.</p><p>Aici morcovii formează o coloană de 50 pixeli în stânga, și buruienile o coloană de 50 pixeli în dreapta. Cu <code>grid-template-columns</code>, creează aceste coloane și folosește <code>fr</code> pentru a face 3 coloane în plus pentru a ocupa restul spațiului.</p>',
      'zh-cn': '<p>当列的宽度采用像素，百分比或者em的单位的时候，其他使用<code>fr</code>单位设置的列将会平分剩下的空间。</p><p>这里的胡萝卜在左边形成了一个50像素的列，并且杂草在右边也占据着50像素的宽度。使用<code>grid-template-columns</code>属性，创建这两个列，使用<code>fr</code>再创建三列，使其平均占据剩下的空间。</p>',
      'zh-tw': '<p>當行的寬度採用像素、百分比或者 em 為單位的時候，其他使用 <code>fr</code> 單位設置的行將會平分剩下的空間。</p><p>這裡的胡蘿蔔在左邊形成了一個 50 像素的行，並且雜草在右邊也佔據 50 像素的寬度。使用 <code>grid-template-columns</code> 屬性，創建這兩個行，使用 <code>fr</code> 再創建三個行，使其平均佔據剩下的空間。</p>',
      'tr': '<p> Kolonlar piksel, yüzdeler veya em ile ayarlandığında, <code>fr</code> ile ayarlanmış diğer sütunlar, kalan alanı paylaşır.</p><p> Burada havuç solda 50 piksel kolon, yabani otlar ise sağda 50 piksel kolon oluşturmaktadır. <code>grid-template-columns</code> ile, bu iki kolonu oluşturun ve kalan boşluğu dolduracak üç kolon daha oluşturmak için <code>fr</code> kullanın.</p>',
      'fr': '<p>Lorsque les colonnes sont définies avec des pixels, des pourcentages ou des ems, toutes les autres colonnes définies avec <code>fr</code> se répartiront l\'espace restant.</p><p>Ici, les carottes forment une colonne de 50 pixels sur la gauche et les mauvaises herbes une colonne de 50 pixels sur la droite. Avec <code>grid-template-columns</code>, créez ces deux colonnes et utilisez <code>fr</code> pour créer trois colonnes supplémentaires qui occupent l\'espace restant entre les deux.</p>',
      'de': '<p>Wenn Spalten mit Pixel, Prozentwerten oder ems definiert wurden, wird jede weitere Spalte, die mit <code>fr</code> angegeben wird, den verbleibenden Platz aufteilen.</p><p>Hier bilden die Karotten eine 50 Pixel breite Spalte auf der linken Seite und das Unkraut eine 50 Pixel breite Spalte auf der rechten Seite. Erstelle diese zwei Spalten mit <code>grid-template-columns</code> und benutze <code>fr</code> um drei weitere Spalten zu erstellen, die den verbleibenden Platz dazwischen ausfüllen.</p>',
      'nl': '<p>Wanneer kolommen worden ingesteld met pixels, percentages of ems, zullen alle andere kolommen die met <code>fr</code> zijn ingesteld de resterende ruimte verdelen.</p><p>Hier vormen de wortels een 50-pixels kolom aan de linkerkant, en het onkruid een 50-pixels kolom aan de rechterkant. Maak met <code>grid-template-columns</code> deze twee kolommen, en gebruik <code>fr</code> om drie extra kolommen te maken die de ruimte ertussenin opvullen.</p>',
      'pt-br': '<p>Quando as colunas são especificadas com pixels, porcentagens, ou ems, qualquer outra coluna definida com <code>fr</code> vai dividir o espaço que sobrou.</p><p>Aqui as cenouras formam uma coluna de 50 pixels na esquerda, e as ervas daninhas uma coluna de 50 pixels na direita. Com <code>grid-template-columns</code>, crie essas duas colunas, e use <code>fr</code> para fazer mais três colunas que ocuparão o espaço sobrando no meio.</p>',
      'ru': '<p>Когда одни столбцы определены с помощью пикселей, процентов или em, а любые другие столбцы — с помощью <code>fr</code>, то последние просто разделят всё возможное оставшееся пространство.</p><p>Сейчас морковь занимает 50 пикселей слева, а сорняки 50 пикселей справа. С помощью <code>grid-template-columns</code> создайте два столбца и используйте <code>fr</code>, чтобы сделать ещё 3 столбца, которые займут оставшееся простанство между ними.</p>',
      'pl': '<p>Kiedy kolumny mają wymiar podany w pixelach, procentach lub em-ach, każda inna kolumna podana w jednostce <code>fr</code> podzieli pozostałą przestrzeń.</p><p>W tym miejscu marchewki tworzą 50 pixelową kolumnę po lewej stronie, a chwasty 50 pixelową kolumnę po prawej. Przy pomocy <code>grid-template-columns</code>, stwórz te dwie kolumny i użyj <code>fr</code>, by stworzyć trzy kolejne kolumny, które zajmą pozostałą przestrzeń.</p>',
      'es': '<p>Cuando algunas columnas son establecidas en píxeles, porcentajes o ems, cualquier otra columna establecida con <code>fr</code> dividirá el espacio restante.</p><p>Aquí las zanahorias forman una columna de 50 píxeles a la izquierda, y las malas hierbas una columna de 50 píxeles a la derecha. Mediante <code>grid-template-columns</code>, crea esas dos columnas y usa <code>fr</code> para crear tres columnas más en el espacio que queda entre ellas.</p>',
      'sv': '<p>När kolumner är satta med pixlar, procent, eller em så kommer alla andra kolumner som är satta med <code>fr</code> att dela upp kvarvarande yta.</p><p>Morötterna utgör här en 50 pixlars kolumn till vänster och ogräset en 50 pixlars kolumn till höger. Använd <code>grid-template-columns</code> för att skapa dessa kolumner och använd <code>fr</code> för att skapa ytterligare tre kolumner som tar upp resten av ytan.</p>',
      'fa': '<p>وقتی ستون ها با پیکسل ها, درصد و یا emها تنظیم می شوند, ستون های دیگری که با <code>fr</code> تنظیم شده اند فضای باقی مانده را بین خود تقسیم خواهند کرد.</p><p>در این بخش هویج ها یک ستون 50 پیکسلی در چپ, و علف های هرز یک ستون 50 پیکسلی در راست تشکیل می دهند. با استفاده از <code>grid-template-columns</code>, این دو ستون را ایجاد, و با استفاده از <code>fr</code> سه ستون دیگر که فضای بین این دو را تقسیم کنند ایجاد کنید.</p>',
      'it': '<p>Quando le colonne sono definite in pixel, percentuale o em, ogni altra colonna definita con <code>fr</code> suddividerà lo spazio restante.</p><p>Qui le carote occupano una colonna di 50 pixel a sinistra e le erbacce occupano una colonna di 50 pixel a destra. Con <code>grid-template-columns</code>, crea queste due colonne, e usa <code>fr</code> per creare tre nuove colonne che occupino lo spazio rimanente nel mezzo.</p>',
      'ko': '<p>열(column)을 pixel, percentage, 혹은 ems로 설정시, <code>fr</code>로 설정된 다른 열(column)의 남은 공간으로 나뉘어집니다.</p><p>여기에 당근은 왼쪽에 50px, 잡초는 오른쪽에 50px로 되어있습니다. <code>grid-template-columns</code>를 사용하여 2개의 열(column), 그리고 <code>fr</code>를 사용하여 나머지 공간을 차지하는 3개의 열(column)까지 만들어보세요.</p>',
      'el': '<p>Όταν οι στήλες ορίζονται με pixels, ποσοστά, ή ems, όσες άλλες στήλες ορίζονται με <code>fr</code> θα κατανείμουν μεταξύ τους τον εναπομείναντα χώρο.</p><p>Εδώ τα καρότα διαμορφώνουν μια στήλη 50 pixel στα αριστερά, και τα ζιζάνια μια στήλη 50 pixel στα δεξιά. Με το <code>grid-template-columns</code>, δημιουργήστε αυτές τις δύο στήλες, και χρησιμοποιήστε <code>fr</code> για να δημιουργήσετε τρεις ακόμη στήλες που να καταλαμβάνουν τον εναπομείναντα χώρο στο ενδιάμεσο.</p>',
      'ja': '<p>列をピクセルやパーセンテージ、em で指定した時、<code>fr</code> をセットした他の列は残りのスペースを山分けします。</p><p>ここに左 50 ピクセルの列をなしているニンジンがあり、右に 50 ピクセルの列の雑草があります。<code>grid-template-columns</code> で左右2列を作り、その間にあるスペースを<code>fr</code> で3つの列を作って三等分してください。</p>',
      'ua': '<p>Коли одні стовпці визначені за допомогою пікселів, відсотків або ems, а будь-які інші стовпці за допомогою <code>fr</code>, то другі просто розділять увесь можливий простір, що залишився.</p><p>Зараз морква займає 50 пікселів зліва, а бур\'яни 50 пікселів справа. За допомогою <code>grid-template-columns</code>, створіть два стовпці і використовуйте <code>fr</code> щоб зробити ще 3 стовпці, які займуть залишився простір між ними.</p>',
      'no': '<p>Når kolonner har verdier i pixler, prosent eller em, deler andre kolonner som har <code>fr</code>-verdier opp plassen som er igjen.</p><p>Gulrøttene utgjør en kolonne på 50 pixler til venstre, og ugresset en kolonne på 50 pixler til høyre. Lag disse to kolonnene med <code>grid-template-columns</code> og bruk <code>fr</code> til å lage tre kolonner til som tar opp den gjenværende plassen i midten.</p>',
      'pt-pt': '<p>Quando as colunas são estabelecidas com pixels, percentagens, ou ems, quaisquer outras colunas estabelecidas com <code>fr</code> dividirão o espaço restante.</p><p>Aqui as cenouras formam uma coluna de 50 pixels à esquerda, e as ervas daninhas uma coluna de 50 pixels à direita. Com <code>grid-template-columns</code>, cria estas duas colunas, e utiliza <code>fr</code> para criar três colunas adicionais que ocuparão o espaço restante no meio.</p>',
      'bg': '<p>Когато колоните са опеделени с помощта на пиксели, проценти или ems, всички останали колони определени с помощта на <code>fr</code> ще си разпределят останалото пространство.</p><p>В момента морковите формират 50-пикселова колона от ляво, а плевелите - 50-пикселова колона от дясно. С помощщта на <code>grid-template-columns</code>, създайте тези две колони и използвайте <code>fr</code>, за да създадете още 3 колони за оставащото място по средата.</p>',
      'ca': '<p>Quan algunes columnes estan establertes en píxels, percentatges o ems, qualsevol altra columna establerta amb <code>fr</code> dividirà l\'espai restant.</p><p>Aquí les pastanagues formen una columna de 50 píxels a l\'esquerra, i les males herbes una columna de 50 píxels a la dreta. Amb <code>grid-template-columns</code> crea aquestes dues columnes i utilitza <code>fr</code> per crear tres columnes més en l\'espai que queda entre elles.</p>',
      'vi': '<p>Khi các cột được thiết lập bằng đơn vị pixels, phần trăm, hoặc ems, thì các cột khác dùng đơn vị <code>fr</code> sẽ chiếm khoảng không gian còn lại.</p><p>Hiên tại, cà-rốt chiếm một cột rộng 50px bên trái và cỏ dại cũng chiếm một cột rộng 50px bên phải. Cậu hãy dùng <code>grid-template-columns</code>, tạo ra 2 cột đấy.Sau đó, sử dụng <code>fr</code> để tạo thêm ba cột chiêm hết khoảng không gian ở giữa.</p>',
      'ar': '<p>عندما يتم تعيين الاعمدة بالبكسل او النسب المئوية أو ems , فإن اي اعمدة تم تعيينها باستخدام <code>fr</code> ستقتسم المساحة المتبقية </p> <p>هنا الجزر يشكل عمود يعرض 50 بكسل على اليسار, والاعشاب الضارة تشكل عمود بعرض 50 بكسل على اليمين. باستخدام <code>grid-template-columns</code> قم بانشاء هذين العمودين, واستخدم <code>fr</code> لانشاء ثلاثة اعمدة أخرى تشغل لمساحة المتبقية بينهما.</p>',
      'fi': '<p>Jos osa riveistä on määritetty px-, %- tai em-yksiköllä, <code>fr</code>-yksiköllä määritetyt rivit jakavat jäljellä olevan tilan keskenään.</p><p>Tässä porkkanat peittävät 50 kuvapisteen (px) levyisen pystyrivin vasemmalla ja rikkaruohot 50 kuvapisteen levyisen pystyrivin oikealla. Määritä nämä kaksi pystyriviä <code>grid-template-columns</code>-ominaisuuden avulla ja väliin vielä kolme yhtä leveää pystyriviä <code>fr</code>-yksikön avulla.</p>',
      'hu': '<p>A pixelben, százalékban, em-ben lefoglalásra került oszlopok melletti <code>fr</code> egységben meghatározott méretű rácselemek a fennmaradó területrészen osztoznak.</p><p>Itt a répák a bal 50 pixel, a gyom pedig a jobb 50 pixel méretű oszlopban helyezkednek el. Készítsd el a <code>grid-template-columns</code>  segítségével ezt a két oszlopot, a közöttük lévő maradék területen pedig az <code>fr</code> egység használatával oszd három oszlopra!</p>',
      'id': '<p>Saat kolom disetel dengan pixel, persentase, atau em, kolom lainnya disetel dengan <code>fr</code> akan membagi ruang yang tersisa.</p><p>Di sini wortel membentuk kolom 50 piksel di sebelah kiri, dan rumput liar membentuk kolom 50 piksel di sebelah kanan. Dengan <code>grid-template-columns</code>, buat dua kolom ini, dan gunakan <code>fr</code> untuk membuat tiga kolom lagi yang mengambil ruang yang tersisa di antaranya.</p>',
      'tl': '<p>Kung ang columns ay naka-set sa pixels, percentages, o ems, anumang columns na naka-set sa <code>fr</code> ay mahahati sa natitirang space.</p><p>Dito, may column na 50 pixel ang mga karot sa kaliwa, at may column na 50 pixel naman ang mga damo sa kanan. Gamit ang <code>grid-template-columns</code>, gawin \'yung dalawang columns na \'yun, at gumamit ng <code>fr</code> para gumawa pa ng tatlo columns sa gitna na sasakop sa natitirang space.</p>',
      'al': '<p>Kur kolonat janë vendosur me pixel, përqindje, apo ems, cdo kolonë tjetër e vendosur me <code>fr</code> do të zërë hapësirën e ngelur.</p><p>Këtu karotat formojnë një kolonë 50 pixel në të majtë, dhe shkurret një kolonë 50 pixel në të djathtë. Me <code>grid-template-columns</code>, krijoni këto dy kolona, dhe përdorni <code>fr</code> për të bërë tre kolona më shumë që zënë hapësirën në mes.</p>',
    },
    board: 'cw',
    classes: {
      '#plants': 'grid-template-columns-50px-1fr-1fr-1fr-50px',
      '#plants > :nth-child(1), #garden > :nth-child(1)': 'grid-area-1-1-6-2',
      '#plants > :nth-child(2), #garden > :nth-child(2)': 'grid-area-1-5-6-6'
    },
    style: {'grid-template-columns': '50px 1fr 1fr 1fr 50px;'},
    before: "#garden {\n  display: grid;\n",
    after: "  grid-template-rows: 20% 20% 20% 20% 20%;\n}\n\n#water {\n  grid-area: 1 / 1 / 6 / 2;\n}\n\n#poison {\n  grid-area: 1 / 5 / 6 / 6;\n}"
  },
  {
    name: 'grid-template-columns 6',
    instructions: {
      'en': '<p>Now there is a 75 pixel column of weeds on the left side of your garden. 3/5 of the remaining space is growing carrots, while 2/5 has been overrun with weeds.</p><p>Use <code>grid-template-columns</code> with a combination of <code>px</code> and <code>fr</code> units to make the necessary columns.</p>',
      'lv': '<p>Tagad kreisejā dārza pusē ir 75 pikseļu kolonna ar nezālēm. 3/5 no atlikušā dārza aug burkāni, kamēr 2/5 ir pārklātas ar nezālēm.</p><p>Lai izveidotu nepieciešamās kolonnas, lieto <code>grid-template-columns</code> un kombinē gan <code>px</code>, gan <code>fr</code>  vienības.</p>',
      'ro': '<p>Acum este o coloană de buruieni de 75 pixeli în partea stângă a grădinii. Pe 3/5 din spațiul rămas cresc morcovi, în timp ce 2/5 a fost invadat de buruieni.</p><p>Folosește <code>grid-template-columns</code> cu o combinație de unități <code>px</code> și <code>fr</code> pentru a face coloanele necesare.</p>',
      'zh-cn': '<p>现在，在你的花园的左边有一列杂草，占据75像素宽。剩余空间的3/5正在长着胡萝卜，剩下的2/5已经杂草泛滥了。</p><p>用<code>grid-template-columns</code>属性，将<code>px</code>和<code>fr</code>单位结合起来，来制作必要的列。</p>',
      'zh-tw': '<p>現在在你的花園的左邊有一行雜草，佔 75 像素寬。剩餘空間的 3/5 正種著胡蘿蔔，而剩下的 2/5 已經雜草叢生。</p><p>用 <code>grid-template-columns</code> 屬性，將 <code>px</code> 和 <code>fr</code> 單位結合起來，來製作必要的行。</p>',
      'tr': '<p>Şimdi bahçenizin sol tarafında yabani otlardan oluşan 75 piksellik bir sütun var. Kalan alanın 2/5\'i yabani otlar ile kaplanmış iken, 3/5\'inde ise havuçlar yetişiyor.</p><p><code>grid-template-columns</code> özelliğini <code>px</code> ve <code>fr</code> kombinasyonu ile kullanarak gerekli kolonları oluşturun.</p>',
      'fr': '<p>Maintenant, il y a une colonne de 75 pixels de mauvaises herbes sur le côté gauche de votre jardin. Sur 3/5 de l\'espace restant, des carottes poussent, tandis que 2/5 ont été envahis par les mauvaises herbes.</p><p>Utilisez <code>grid-template-columns</code> avec une combinaison d’unités <code>px</code> et <code>fr</code> pour créer les colonnes nécessaires.</p>',
      'de': '<p>Nun gibt es eine 75 Pixel breite Spalte mit Unkraut auf der linken Seite deines Gartens. Auf 3/5 des übrigen Platzes wachsen Karotten, während 2/5 von Unkraut überwuchert wurden.</p><p>Benutze <code>grid-template-columns</code> mit einer Kombination aus <code>px</code> und <code>fr</code> Einheiten um die benötigten Spalten zu erstellen.</p>',
      'nl': '<p>Nu is er een 75-pixels kolom onkruid aan de linkerkant van je tuin. Op 3/5 van de resterende ruimte groeien wortels, terwijl 2/5 is gevuld met onkruid.</p><p>Gebruik <code>grid-template-columns</code> met een combinatie van <code>px</code> en <code>fr</code>-eenheden om de benodigde kolommen te maken.</p>',
      'pt-br': '<p>Agora há uma coluna de 75 pixels de ervas daninhas no lado esquerdo da sua horta. 3/5 do espaço remanescente está crescendo cenouras, enquanto 2/5 tem sido envadido por ervas daninhas.</p><p>Use <code>grid-template-columns</code> com uma combinação de unidades <code>px</code> e <code>fr</code> para fazer as colunas necessárias.</p>',
      'ru': '<p>Теперь у нас есть столбец сорняков с шириной 75 пикселей на левой стороне сада. ⅗ оставшегося пространства занимает растущая морковь, а ⅖ заполонили сорняки.</p><p>Используйте <code>grid-template-columns</code> с комбинацией <code>px</code> и <code>fr</code>, чтобы создать необходимые столбцы.</p>',
      'pl': '<p>Teraz, po lewej stronie jest 75 pixelowa kolumna chwastów. 3/5 pozostałej przestrzeni jest zajęte przez marchewki, podczas gdy 2/5 jest porośnięte przez chwasty.</p><p>Użyj <code>grid-template-columns</code> w połączeniu z jednostkami <code>px</code> i <code>fr</code>, by stworzyć wymagane kolumny.</p>',
      'es': '<p>Ahora hay una columna de malas hierbas de 75 píxeles en el lado izquierdo del jardín. En 3/5 del espacio restante crecen zanahorias, mientras que los 2/5 restantes han sido invadidos por malas hierbas.</p><p>Usa <code>grid-template-columns</code> con una combinación de <code>px</code> y <code>fr</code> para crear las columnas necesarias.</p>',
      'sv': '<p>Nu finns det en 75 pixlars kolumn av ogräs på vänstra delen av trädgården. 3/5 av resterande yta har morötter och 2/5 har återigen ogräs.</p><p>Använd <code>grid-template-columns</code> med en kombination av <code>px</code> och <code>fr</code> enheter för att skapa dom nödvändiga kolumnerna.</p>',
      'fa': '<p>در این بخش یک ستون 75 پیکسلی علف های هرز در سمت چپ باغ وجود دارد. در 3/5 فضای باقی مانده هویج و در 2/5 دیگر آن علف های هرز روییده است.</p><p>از <code>grid-template-columns</code> استفاده کنید و با ترکیبی از واحدهای <code>px</code> و <code>fr</code>  ستون های مورد نیاز را بسازید.</p>',
      'it': '<p>Ora c\'è una colonna di erbacce di 75 pixel nel lato sinistro del tuo giardino. 3/5 dello spazio rimanente è occupato da carote, mentre 2/5 occupato ancora da erbacce.</p><p>Usa <code>grid-template-columns</code> con una combinazione di <code>px</code> e <code>fr</code> per creare le colonne necessarie.</p>',
      'ko': '<p>이제 당신의 정원 왼쪽 75px에 잡초가 있습니다. 나머지 공간의 3/5에는 당근이 자라고 있으며, 반대인 2/5에는 잡초가 넘치고있습니다.</p><p><code>grid-template-columns</code>를 <code>px</code>와 <code>fr</code>단위와 함께 사용하여 필요한 열(column)을 만드세요.</p>',
      'el': '<p>Τώρα υπάρχει μία στήλη 75 pixel με ζιζάνια στην αριστερή πλευρά του κήπου σας. Στα 3/5 του εναπομείναντος χώρου μεγαλώνουν καρότα, ενώ τα 2/5 έχουν κατακλυστεί με ζιζάνια.</p><p>Χρησιμοποιήστε το <code>grid-template-columns</code> μ\' έναν συνδυασμό μονάδων <code>px</code> και <code>fr</code> για να δημιουργήσετε τις απαραίτητες στήλες.</p>',
      'ja': '<p>次は 75 ピクセルの幅の雑草の列がガーデンの左側にあります。残りのスペースの 3/5 でニンジンが育っていますが、2/5 は雑草に覆われてしまっています。</p><p><code>grid-template-columns</code> で <code>px</code> と <code>fr</code> 単位を組み合わせて使って、必要な列を作ってください。</p>',
      'ua': '<p>Тепер у нас є стовпець бур\'янів з шириною 75 пікселів на лівій стороні вашого саду. 3/5 простору, що залишилося займає зростаюча морква, коли 2/5 заполонили бур\'яни.</p><p>Використовуйте <code>grid-template-columns</code> з комбінацією <code>px</code> і <code>fr</code> щоб зробити необхідні стовпці.</p>',
      'no': '<p>Nå er det en kolonne på 75 pixler med ugress på venstre side av hagen din. På 3/5 av den gjenværende plassen vokser det gulrøtter, mens 2/5 har blitt overgrodd av ugress.</p><p>Bruk <code>grid-template-columns</code> kombinert med <code>px</code> og <code>fr</code>-enheter for å lage de nødvendige kolonnene.</p>',
      'pt-pt': '<p>Agora há uma coluna de ervas daninhas de 75 pixels no lado esquerdo da tua horta. No espaço restante, em 3/5 crescem cenouras, e ervas daninhas invadiram 2/5.</p><p>Utiliza <code>grid-template-columns</code> com uma combinação de unidades <code>px</code> e <code>fr</code> para criar as colunas necessárias.</p>',
      'br': '<p>Сега има 75-пикселова колона от плевели от лявата страна на Вашата градина. 3/5 от оставащото място е засадено с моркови, а 2/5 е обрасло с плевели.</p><p>Използвайте <code>grid-template-columns</code> в комбинация с <code>px</code> и <code>fr</code> единици, за да създадете нужните колони.</p>',
      'ca': '<p>Ara hi ha una columna de males herbes de 75 píxels al costat esquerra del jardí. Als 3/5 de l\'espai restant creixen pastanagues, mentre que els altres 2/5 ha estat conquerits per males herbes.</p><p>Utilitza <code>grid-template-columns</code> amb una combinació de <code>px</code> i <code>fr</code> per crear les columnes necessaries.</p>',
      'vi': '<p>Hiện tại, cỏ dại đang chiếm một cột rộng 75px phía bên trái của khu vườn. Cà-rốt chiếm 3/5 và cỏ dại sẽ chiếm 2/5 không gian còn lại.</p><p>Hãy dùng <code>grid-template-columns</code> kết hơp với các đơn vị <code>px</code> và <code>fr</code> để tạo ra các cột cần thiết.</p>',
      'ar' : '<p>الان يوجد عمود بعرض 75 بكسل من الاعشاب الضارة على الجانب الايسر من حديقتك. 3/5  من المساحة المتبقية هي جزر في حين 2/5  امتلأت ب الاعضاب الضارة. </p> <p> استخدم <code>grid-template-columns</code> مع مزيج من وحدات  <code>px</code> و <code>fr</code> لعمل الاعمدة اللازمة</p>',
      'fi': '<p>Nyt puutarhan vasemmalla laidalla on 75 kuvapistettä (px) leveä pystyrivi rikkaruohoja. 3/5 jäljellä olevasta tilasta kasvaa porkkanaa, mutta vielä 2/5 oikeasta laidasta on rikkaruohojen peitossa.</p><p>Määritä tarvittavat pystyrivit antamalla <code>grid-template-columns</code>-ominaisuudelle arvoina <code>px</code>- ja <code>fr</code>-yksiköitä.</p>',
      'hu': '<p>Most a bal oldali 75 pixelenyi oszlopban nő gyom a kertedben. A fennmaradó terület 3/5 részén répa nő, míg 2/5 részét gaz futotta be.</p><p>Használd a <code>grid-template-columns</code> tulajdonságot a <code>px</code> és <code>fr</code>  egységekkel a szükséges oszlopok létrehozásához!</p>',
      'id': '<p>Sekarang ada kolom rumput liar 75 pixel di sisi kiri kebunmu. 3/5 dari ruang yang tersisa ditanami wortel, sementara 2/5 telah ditumbuhi rumput liar.</p><p>Gunakan <code>grid-template-columns</code> dengan kombinasi <code>px</code> dan satuan <code>fr</code> untuk membuat kolom yang diperlukan.</p>',
      'tl': '<p>Ngayon naman ay may 75 pixel na column ng mga damo sa kaliwang bahagi ng hardin mo. 3/5 ng natitirang space ay para sa pagpapalaki ng mga karot, habang ang 2/5 naman ay pinipinsala ng mga damo.</p><p>Gumamit ng <code>grid-template-columns</code> na magkahalo ang <code>px</code> at <code>fr</code> na units para makabuo ng kinakailangan na columns.</p>',
      'al': '<p>Tani kemi një kolonë 75 pixel në të majtën e kopështit tuaj. 3/5 e pjesës së ngelur po rriten karota, ndërkohë që 2/5 e kanë zënë shkurret.</p><p>Përdorni <code>grid-template-columns</code> me një kombinim të <code>px</code> dhe <code>fr</code> për të krijuar kolonat e nevojshme.</p>',
    },
    board: 'wcw',
    classes: {'#plants': 'grid-template-columns-6', '#garden, #overlay': 'grid-template-rows-100p'},
    style: {'grid-template-columns': '75px 3fr 2fr;'},
    before: "#garden {\n  display: grid;\n",
    after: "  grid-template-rows: 100%;\n}"
  },
  {
    name: 'grid-template-rows 1',
    instructions: {
      'en': '<p><code>grid-template-rows</code> works much the same as <code>grid-template-columns</code>.</p><p>Use <code>grid-template-rows</code> to water all but the top 50 pixels of your garden. Note that the water is set to fill only your 5th row, so you\'ll need to create 5 rows in total.</p>',
      'lv': '<p><code>grid-template-rows</code> darbojas aptuveni tāpat kā <code>grid-template-columns</code></p><p>Pielieto <code>grid-template-rows</code> un aplaisti visu, izņemto 50 pikseļus dārza augšpusē. Ievēro, ka ūdens pašlaik aplaista tikai 5. rindu. Tā kā tev kopā vajadzēs izveidot 5 rindas.</p>',
      'ro': '<p><code>grid-template-rows</code> funcționează ca <code>grid-template-columns</code>.</p><p>Folosește <code>grid-template-rows</code> pentru a uda toți mai puțin cei 50 pixeli din topul grădinii. Notează faptul că apa este setată să ocupe doar al cincelea rând, deci va trebui să creezi 5 rănduri în total.</p>',
      'zh-cn': '<p><code>grid-template-rows</code>和<code>grid-template-columns</code>的作用大概相同。</p><p>用<code>grid-template-rows</code>属性来为花园中除了顶部50像素之外的所有区域浇水。注意：水被设置为仅填充第五行，所以你总共需要创建5行。</p>',
      'zh-tw': '<p><code>grid-template-rows</code> 和 <code>grid-template-columns</code> 的作用大致相同。</p><p>用 <code>grid-template-rows</code> 屬性來為花園中除了頂部 50 像素之外的所有區域澆水。注意：水被設置為僅填充第五列，所以你總共需要創建 5 列。</p>',
      'tr': '<p><code>grid-template-rows</code> özelliği <code>grid-template-columns</code> gibi çalışır.</p><p><code>grid-template-rows</code> özelliğini kullanarak bahçenin en üst 50px haricindeki kısımlarını sulayın. Unutmayın ki; su sadece beşinci sırayı sulamak üzere ayarlandı. Dolayısı ile toplamda 5 adet sıra oluşturmanız gerekecek.</p>',
      'fr': '<p><code>grid-template-rows</code> fonctionne de la même manière que <code>grid-template-columns</code>.</p><p>Utilisez <code>grid-template-rows</code> pour tout arroser, sauf les 50 premiers pixels de votre jardin. Remarquez que l\'eau est définie pour remplir uniquement votre 5ème rangée, donc vous devrez créer 5 lignes au total.</p>',
      'de': '<p><code>grid-template-rows</code> funktioniert analog zu <code>grid-template-columns</code>.</p><p>Benutze <code>grid-template-rows</code>, um alles außer die obersten 50 Pixel deines Gartens zu wässern. Beachte, dass das Wasser so eingestellt ist, dass es nur deine fünfte Reihe ausfüllt, du musst also im Ganzen 5 Reihen erstellen.</p>',
      'nl': '<p><code>grid-template-rows</code> werkt bijna hetzelfde als <code>grid-template-columns</code>.</p><p>Gebruik <code>grid-template-rows</code> om je hele tuin, behalve 50 pixels aan de bovenkant, water te geven. Onthoud dat het water alleen je 5e rij moet vullen, dus je hebt 5 rijen in totaal nodig.</p>',
      'pt-br': '<p><code>grid-template-rows</code> funciona da mesma forma que <code>grid-template-columns</code>.</p><p>Use <code>grid-template-rows</code> para irrigar toda sua horta menos os 50 pixels do topo. Note que a água está definida para irrigar apenas sua 5ª linha, então você precisará criar 5 linhas no total.</p>',
      'ru': '<p><code>grid-template-rows</code> работает точно так же, как и <code>grid-template-columns</code>.</p><p>Используйте <code>grid-template-rows</code>, чтобы полить всё, кроме верхних 50 пикселей сада. Помните, что вода заполняет только пятую строку, так что вам нужно создать именно пять строк.</p>',
      'pl': '<p><code>grid-template-rows</code> działa w podobny sposób jak <code>grid-template-columns</code>.</p><p>Użyj <code>grid-template-rows</code> aby nawodnić ogród pomijając 50 pixeli od góry. Zauważ, że woda jest ustawiona tak aby wypełnić tylko 5 rząd, dlatego będziesz musiał stworzyć łącznie 5 rzędów.</p>',
      'es': '<p><code>grid-template-rows</code> funciona exactamente igual que <code>grid-template-columns</code>.</p><p>Usa <code>grid-template-rows</code> para regar todo excepto los 50 píxeles de la parte superior de tu jardín. Fíjate que el agua se ha establecido para que llene solo la 5ª fila, por lo que tendrás que crear 5 filas en total.</p>',
      'sv': '<p><code>grid-template-rows</code> fungerar i stort på samma sätt som <code>grid-template-columns</code>.</p><p>Använd <code>grid-template-rows</code> för att vattna allt förutom de översta 50 pixlarna i trädgården. Notera att vattnet är satt att bara fylla din femte rad, så du behöver skapa total fem rader.</p>',
      'fa': '<p><code>grid-template-rows</code> همانند <code>grid-template-columns</code> کار  می کند.</p><p>از <code>grid-template-rows</code> برای آبیاری همه جا به جز 50 پیکسل بالای باغ استفاده کنید. توجه کنید که آب تنها برای پر کردن سطر پنجم تنظیم شده است, پس شما باید در مجموع 5 سطر ایجاد کنید.</p>',
      'it': '<p><code>grid-template-rows</code> funziona nella stessa maniera di <code>grid-template-columns</code>.</p><p>Usa <code>grid-template-rows</code> per innaffiare tutto il giardino tranne i 50 pixel in cima al tuo giardino. Nota che l\'acqua è impostata ad innaffiare solo la 5ª riga, quindi devi creare in totale 5 righe.</p>',
      'ko': '<p><code>grid-template-rows</code>은 <code>grid-template-columns</code>와 거의 동일하게 작동합니다.</p><p><code>grid-template-rows</code>을 사용하여 정원 상단의 50px를 제외하고 물을 주세요. 물이 5번째 행(row)만 설정되어있으므로, 5개의 행(row)을 생성해야합니다.</p>',
      'el': '<p>Το <code>grid-template-rows</code> λειτουργεί παρόμοια με το <code>grid-template-columns</code>.</p><p>Χρησιμοποιήστε το <code>grid-template-rows</code> για να ποτίσετε όλα εκτός από τα άνω 50 pixels του κήπου σας. Σημειώστε ότι το νερό έχει ρυθμιστεί να γεμίζει μόνο την 5η σας σειρά, οπότε θα χρειαστεί να δημιουργήσετε 5 στήλες συνολικά.</p>',
      'ja': '<p><code>grid-template-rows</code> は <code>grid-template-columns</code> と全く同じように動作します。</p><p><code>grid-template-rows</code> を使ってガーデンの上部 50 ピクセル以外の全体に水をやりましょう。ただし、水は5番目の列にだけ流れているので、5つの列を作る必要があります。気を付けてください。</p>',
      'ua': '<p><code>grid-template-rows</code> працює точно так само, як і <code>grid-template-columns</code>.</p><p>Використовуйте <code>grid-template-rows</code> щоб полити все, крім верхніх 50 пікселів вашого саду. Пам\'ятайте, що вода на даний момент заповнює тільки 5-й рядок, так що вам знадобитися створити в сумі 5 рядків.</p>',
      'no': '<p><code>grid-template-rows</code> fungerer mye på samme måte som  <code>grid-template-columns</code>.</p><p>Bruk <code>grid-template-rows</code> til å vanne alt bortsett fra de øverste 50 pixlene av hagen din. Merk at vannet er kun satt til å fylle den femte raden din, så du må lage 5 rader til sammen.</p>',
      'pt-pt': '<p><code>grid-template-rows</code> funciona basicamente como <code>grid-template-columns</code>.</p><p>Utiliza <code>grid-template-rows</code> para regar toda a tua horta excepto os 50 pixels no topo. Observa que a água foi estabelecida para preencher apenas a tua 5ª linha, como tal precisarás de criar 5 linhas no total.</p>',
      'bg': '<p><code>grid-template-rows</code> работи почти като <code>grid-template-columns</code>.</p><p>Използвайте <code>grid-template-rows</code>, за да полеете цялата градина с изключение на горните 50 пиксела. Обърнете внимание, че водата в момента покрива само 5-ия ред, така че ще Ви се наложи да създадете общо 5 реда.</p>',
      'ca': '<p><code>grid-template-rows</code> funciona exactament igual que <code>grid-template-columns</code>.</p><p>Utilitza <code>grid-template-rows</code> per regar-ho tot excepte els 50 píxels de la part superior del jardí. Fixa\'t que s\'ha establert que l\'aigua només empleni la 5a fila, per tant, n\'hauràs de crear un total de 5.</p>',
      'vi': '<p><code>grid-template-rows</code> hoạt động tương tự như <code>grid-template-columns</code>.</p><p>Hãy dùng <code>grid-template-rows</code> để tưới nước cho toàn bộ cà-rốt trừ khu vực 50px trên cùng . Lưu ý rằng, nước chỉ được thiết lập để tưới cho dòng thứ 5 của cậu, cậu sẽ cần tạo tổng cộng 5 dòng.',
      'ar': '<p> <code>grid-template-rows</code> تعمل تماما مثل <code>grid-template-columns</code>  </p> <p>استخدم <code>grid-template-rows</code> لري جميع باستثناء ال50 بيكسل العلوية من حديقتك. لاحظ انه تعم تعيين المياه لملء الصف الخامس فقط. لذلك ستحتاج الى انشاء 5 صفوف في المجموع </p> ',
      'fi': '<p><code>grid-template-rows</code> toimii pitkälti samalla tavalla kuin <code>grid-template-columns</code>.</p><p>Kastele kaikki paitsi 50 kuvapisteen (px) levyinen kaistale puutarhan yläreunassa <code>grid-template-rows</code>-ominaisuuden avulla. Huomaa, että vesi peittää ainoastaan viidennen rivin, joten ratkaisussa täytyy määrittää viisi riviä.</p>',
      'hu': '<p>A <code>grid-template-rows</code> nagyjából úgy működik, mint a <code>grid-template-columns</code>.</p><p>Használd a <code>grid-template-rows</code> tulajdonságot, hogy megöntözd a kerted a felső 50 pixel kivételével! Figyelj, az öntözés úgy van beállítva, hogy csak az ötödik sorod tölti ki, tehát összesen öt sort kell létrehoznod!</p>',
      'id': '<p><code>grid-template-rows</code> bekerja layaknya <code>grid-template-columns</code>.</p><p>Gunakan <code>grid-template-rows</code> untuk menyirami semua kecuali 50 pixel teratas tamanmu. Perhatikan bahwa air diatur hanya untuk mengisi baris ke-5 Anda, jadi kamu harus membuat total 5 baris.</p>',
      'tl': '<p>Ang <code>grid-template-rows</code> ay pareho din lang ng <code>grid-template-columns</code>.</p><p>Gumamit ng <code>grid-template-rows</code> para diligan lahat maliban sa 50 pixels ng taas ng hardin mo. Tandaan mo na nasa panglimang row lang \'yung tubig, kaya kailangan mong gumawa ng limang rows sa kabuuan.<p>',
      'al': '<p><code>grid-template-rows</code> funksionon në përgjithësi njësoj si <code>grid-template-columns</code>.</p><p>Përdorni <code>grid-template-rows</code> për të ujitur të gjithë kopështin, dhe duke përjashtuar 50 pixel në fillim të tij. Kini parasysh se uji është vendosur që të mbushë vetëm rrjeshtin e pestë, kështu që ju duhet të krijoni pesë rrjeshta në total.</p>',
    },
    board: 'c',
    classes: {
      '#plants': 'grid-template-rows-50px-0-0-0-1fr',
      '#plants > :nth-child(1), #garden > :nth-child(1)': 'grid-area-5-1-6-6'
    },
    style: {'grid-template-rows': '1fr 100px;'},
    before: "#garden {\n  display: grid;\n  grid-template-columns: 20% 20% 20% 20% 20%;\n",
    after: "}\n\n#water {\n  grid-column: 1 / 6;\n  grid-row: 5 / 6;\n}"
  },
  {
    name: 'grid-template 1',
    instructions: {
      'en': '<p><code>grid-template</code> is a shorthand property that combines <code>grid-template-rows</code> and <code>grid-template-columns</code>.</p><p>For example, <code>grid-template: 50% 50% / 200px;</code> will create a grid with two rows that are 50% each, and one column that is 200 pixels wide.</p><p>Try using <code>grid-template</code> to water an area that includes the top 60% and left 200 pixels of your garden.</p>',
      'lv': '<p><code>grid-template</code> ir saīsinātā metode, kas sevī ietver <code>grid-template-rows</code> un <code>grid-template-columns</code>.</p><p>Piemāram, <code>grid-template: 50% 50% / 200px;</code> , izveidos "grid" ar divām rinām, kas katra aizņem 50% un vienu kolonnu, kuras platums ir 200 pikseļi.</p><p>Pamēģini pielietot <code>grid-template</code>  un aplaistīt laukumu ,kas sevī ietver augšējos 60% un 200 pikseļu lielu laukumu no kreisās dārza puses.</p>',
      'ro': '<p><code>grid-template</code> este o proprietate prescurtată care combină <code>grid-template-rows</code> și <code>grid-template-columns</code>.</p><p>De exemplu, <code>grid-template: 50% 50% / 200px;</code> va crea un grid cu două rânduri care au fiecare 50%, și o coloană care este 200 pixeli lată.</p><p>Încearcă să folosești <code>grid-template</code> pentru a uda o zonă care include cei 60% din topul grădinii și 200 pixeli din stânga grădinii.</p>',
      'zh-cn': '<p><code>grid-template</code>是<code>grid-template-rows</code>和<code>grid-template-columns</code>的缩写形式。</p><p>比如说，<code>grid-template: 50% 50% / 200px;</code>将创建一个具有两行的网格，每一行占据50%，以及一个200像素宽的列。</p><p>尝试着使用<code>grid-template</code>属性来浇水，需要包括你的花园上部的60%，以及左侧的200像素。</p>',
      'zh-tw': '<p><code>grid-template</code> 是一個結合 <code>grid-template-rows</code> 和 <code>grid-template-columns</code> 的縮寫屬性。</p><p>比如說，<code>grid-template: 50% 50% / 200px;</code> 將創建一個具有兩列的網格，每列佔 50%，以及一個 200 像素寬的行。</p><p>嘗試使用 <code>grid-template</code> 屬性來澆水，需要包括你的花園上部的 60%，以及左側的 200 像素。</p>',
      'tr': '<p><code>grid-template</code> bir kısayol özelliğidir. <code>grid-template-rows</code> ve <code>grid-template-columns</code> özelliklerini birleştirir.</p><p>Örneğin, <code>grid-template: 50% 50% / 200px;</code> her biri %50 olan iki sıra ve 200 piksel genişliğinde bir kolon içeren bir tablo oluşturacaktır.</p><p><code>grid-template</code> özelliğini kullanmaya çalışarak bahçenizin en yukarı %60\'ını ve 200 pixel sol tarafını su ile kaplayın.</p>',
      'fr': '<p><code>grid-template</code> est la propriété raccourcie qui combine <code>grid-template-rows</code> et <code>grid-template-columns</code>.</p><p>Par exemple, <code>grid-template: 50% 50% / 200px;</code> créera une grille avec 2 lignes de 50% de hauteur chacune et une colonne de 200 pixels de large.</p><p>Essayez à l\'aide de <code>grid-template</code> d\'arroser une région comprenant 60% du haut et 200 pixels à gauche de votre jardin.</p>',
      'de': '<p><code>grid-template</code> ist eine Kurzschrift-Eigenschaft, die <code>grid-template-rows</code> und <code>grid-template-columns</code> kombiniert.</p><p><code>grid-template: 50% 50% / 200px;</code> zum Beispiel erstellt ein Raster mit zwei Reihen, welche je 50% einnehmen und eine Spalte, die 200 Pixel breit ist.</p><p>Versuche, <code>grid-template</code> zu benutzen, um einen Bereich zu wässern, der die obersten 60% und 200 Pixel von links deines Gartens einnimmt.</p>',
      'nl': '<p><code>grid-template</code> is een shorthand property die <code>grid-template-rows</code> en <code>grid-template-columns</code> combineert.</p><p>Bijvoorbeeld, <code>grid-template: 50% 50% / 200px;</code> maakt een grid met twee rijen van elk 50 %, en één kolom van 200 pixels breed.</p><p>Probeer met behulp van <code>grid-template</code> om een gebied te bewateren dat vanaf de bovenkant van je tuin 60 % is en vanaf links 200 pixels.</p>',
      'pt-br': '<p><code>grid-template</code> é uma propriedade curta que combina <code>grid-template-rows</code> e <code>grid-template-columns</code>.</p><p>Por exemplo, <code>grid-template: 50% 50% / 200px;</code> irá criar uma grade com duas linhas com 50% cada, e uma coluna que tem 200 pixels de largura.</p><p>Tente usar <code>grid-template</code> para irrigar uma área que inclui 60% do topo e 200px da esquerda da sua horta.</p>',
      'ru': '<p><code>grid-template</code> — сокращённый вариант комбинации <code>grid-template-rows</code> и <code>grid-template-columns</code>.</p><p>Например, <code>grid-template: 50% 50% / 200px</code> создаст grid-сетку с двумя строками по 50% каждая и одним столбцом шириной 200 пикселей.</p><p>Попробуйте использовать <code>grid-template</code>, чтобы полить зону, включающую в себя верхние 60% и левые 200 пикселей сада.</p>',
      'pl': '<p><code>grid-template</code> jest skróconą właściwością, która łączy <code>grid-template-rows</code> i <code>grid-template-columns</code>.</p><p>Na przykład, <code>grid-template: 50% 50% / 200px;</code> stworzy siatkę (grid) z dwoma wierszami każdy po 50%, i jedną kolumnę, która jest szeroka na 200 pixeli.</p><p>Spróbuj użyć <code>grid-template</code> by nawodnić powierzchnię, która zajmie 60% od góry i 200 pixeli od lewej.</p>',
      'es': '<p><code>grid-template</code> es una propiedad abreviada que combina <code>grid-template-rows</code> y <code>grid-template-columns</code>.</p><p>Por ejemplo, <code>grid-template: 50% 50% / 200px;</code> creará una cuadrícula con dos filas que ocuparán el 50% del alto cada una, y una columna que será 200 píxeles de ancho.</p><p>Prueba a usar <code>grid-template</code> para regar un área que incluya el 60% superior y 200 píxeles desde la izquierda en tu jardín.</p>',
      'sv': '<p><code>grid-template</code> är en förenklad egenskap som kombinerar <code>grid-template-rows</code> och <code>grid-template-columns</code>.</p><p>Till exempel, <code>grid-template: 50% 50% / 200px;</code> kommer skapa ett rutnät med två rader på 50% var, samt en kolumn som är 200 pixlar bred.</p><p>Använd <code>grid-template</code> för att vattna ett område som inkluderar 60% från toppen och 200 pixlar från vänsterkant av trädgården.</p>',
      'fa': '<p><code>grid-template</code> روش کوتاه شده ی <code>grid-template-rows</code> و <code>grid-template-columns</code> است.</p><p>برای مثال, <code>;grid-template: 50% 50% / 200px</code> گریدی با دو سطر 50 درصدی و یک  ستون 200 پیکسلی  می سازد.</p><p>با استفاده از <code>grid-template</code> ناحیه ای از باغتان شامل 60 درصد بالایی و 200 پیکسل سمت چپ را می شود را آبیاری کنید</p>',
      'it': '<p><code>grid-template</code> è un\'abbreviazione che combina <code>grid-template-rows</code> e <code>grid-template-columns</code>.</p><p>Per esempio, <code>grid-template: 50% 50% / 200px;</code> creerà una griglia con due righe di dimensione ognuna del 50%, e una colonna larga 200 pixel.</p><p>Prova ad usare <code>grid-template</code> per innaffiare un\'area che includa il 60% della parte verticale e 200 pixel della parte sinistra del tuo giardino.</p>',
      'ko': '<p><code>grid-template</code>은 <code>grid-template-rows</code>와 <code>grid-template-columns</code>를 조합한 단축 속성입니다.</p><p>예를 들어, <code>grid-template: 50% 50% / 200px;</code>은 각각 50% 인 두개의 행(row)과 200px 너비의 한개의 열(column)의 그리드를 생성합니다.</p><p><code>grid-template</code>을 사용하여 상단 60%와 왼쪽 200px를 포함하는 영역에 물을주세요.</p>',
      'el': '<p>Το <code>grid-template</code> είναι μια συντομογραφική ιδιότητα που συνδυάζει το <code>grid-template-rows</code> και το <code>grid-template-columns</code>.</p><p>Λόγου χάρη, το <code>grid-template: 50% 50% / 200px;</code> θα δημιουργήσει ένα πλέγμα με δύο σειρές που είναι 50% η καθεμία, και μία στήλη που είναι 200 pixels σε μήκος.</p><p>Δοκιμάστε να χρησιμοποιήσετε το <code>grid-template</code> για να ποτίσετε μια περιοχή που περιλαμβάνει το άνω 60% και τα αριστερά 200 pixels του κήπου σας.</p>',
      'ja': '<p><code>grid-template</code> は、<code>grid-template-rows</code> と <code>grid-template-columns</code> を同時に指定できる短縮プロパティです。</p><p>たとえば、<code>grid-template: 50% 50% / 200px;</code> と書くと、それぞれ 50% の高さを持つ2つの行と、200 ピクセルの幅を持つ1つの列を作ることができます。</p><p><code>grid-template</code> を使って、ガーデンの上部 60% と左 200 ピクセルに水をやってみてください。</p>',
      'ua': '<p><code>grid-template</code> є коротким варіантом комбінації <code>grid-template-rows</code> і <code>grid-template-columns</code>.</p><p>Наприклад, <code>grid-template: 50% 50% / 200px;</code> створить grid сітку з 2-ма рядками, по 50% кожна, і одним стовпцем шириною 200 пікселів.</p><p>Спробуйте використовувати <code>grid-template</code> щоб полити зону, що включає в себе верхні 60% і ліві 200 пікселів вашого саду.</p>',
      'no': '<p><code>grid-template</code> er en forkortet egenskap som kombinerer <code>grid-template-rows</code> og <code>grid-template-columns</code>.</p><p>For eksempel, <code>grid-template: 50% 50% / 200px;</code> lager et rutenett med to rader på 50% hver, og en kolonne som er 200 pixler bred.</p><p>Prøv og bruk <code>grid-template</code> til å vanne området som består av 60% fra toppen og 200 pixler fra venstre av hagen din.</p>',
      'pt-pt': '<p><code>grid-template</code> é uma propriedade abreviada que combina <code>grid-template-rows</code> e <code>grid-template-columns</code>.</p><p>Por exemplo, <code>grid-template: 50% 50% / 200px;</code> criará uma grelha com duas linhas ocupando 50% da altura cada, e uma coluna com 200 pixels de largura.</p><p>Experimenta utilizar <code>grid-template</code> para regar uma área que inclui os 60% superiores e 200px desde a esquerda da tua horta.</p>',
      'bg': '<p><code>grid-template</code> е кратък начин за изписване на комбинацията от <code>grid-template-rows</code> и <code>grid-template-columns</code>.</p><p>Например, <code>grid-template: 50% 50% / 200px;</code> ще създаде grid с два реда по 50% всеки и една колона, която е 200 пиксела.</p><p>Опитайте да използвате <code>grid-template</code>, за да полеете пространство, което покрива горните 60% и левите 200 пиксела от Вашата градина.</p>',
      'ca': '<p><code>grid-template</code> és una propietat abreujada que combina <code>grid-template-rows</code> i <code>grid-template-columns</code>.</p><p>Per exemple, <code>grid-template: 50% 50% / 200px;</code> crearà una quadrícula amb duess files que ocuparan el 50% de l\'alçada de cada una, i una columna de 200 píxels d\'amplada.</p><p>Prova d\'utilitzar <code>grid-template</code> per regar una àrea que inclogui el 60% superior i 200 píxels des de l\'esquerra del jardí.</p>',
      'vi': '<p><code>grid-template</code> là cú pháp rút gọn kết hợp giữa <code>grid-template-rows</code> và <code>grid-template-columns</code>.</p><p>Ví dụ, <code>grid-template: 50% 50% / 200px;</code> sẽ tạo 2 dòng, mỗi dòng chiếm 50%, và một cột rộng 200 pixels.</p><p>Hãy dùng <code>grid-template</code> để tưới nước cho khu vực chiếm 60% trên cùng và 200 pixels phía bên trái của khu vườn.</p>',
      'ar': '<p> <code>grid-template</code> هي خاصة مختصرة تجمع بين  <code>grid-template-rows</code> و <code>grid-template-columns</code>. </p> <p> على سبيل المثال, <code>;grid-template: 50% 50% / 200px</code> ستنشئ جريد ذات صفين يبلغ عرض كل منهما 50% وعمودا واحد بعرض 200 بكسل </p> <p> جرب استخدام <code>grid-template</code> لري منطقة تحتوي على 60% العلوية و 200 بكسل المتبقية من حديقتك. </p>',
      'fi': '<p><code>grid-template</code> yhdistää ominaisuudet <code>grid-template-rows</code> ja <code>grid-template-columns</code>.</p><p>Esimerkiksi <code>grid-template: 50% 50% / 200px;</code> luo ruudukon, jossa on kaksi 50 %:n levyistä vaakariviä ja yksi 200 kuvapisteen levyinen pystyrivi.</p><p>Kastele alue, joka peittää 60 % puutarhan yläreunasta ja 200 kuvapistettä vasemmasta reunasta määrittämällä ominaisuus <code>grid-template</code>.</p>',
      'hu': '<p>A <code>grid-template</code> rövidített tulajdonság a <code>grid-template-rows</code> és <code>grid-template-columns</code> tulajdonságokat kombinálja.</p><p>A <code>grid-template: 50% 50% / 200px;</code> például két, egyformán 50-50%-os méretű sort és egy 200 pixel széles oszlopot magába foglaló rácsot fog létrehozni.</p><p>Próbáld meg a kerted felső 60%-át és bal 200 pixelét magába foglaló részt a <code>grid-template</code> használatával megöntözni!</p>',
      'id': '<p><code>grid-template</code> adalah properti singkatan yang menggabungkan <code>grid-template-rows</code> dan <code>grid-template-columns</code>.</p><p>Sebagai contoh, <code>grid-template: 50% 50% / 200px;</code> akan membuat grid dengan dua baris yang masing-masing 50%, dan satu kolom dengan lebar 200 piksel.</p><p>Coba gunakan <code>grid-template</code> untuk menyirami area yang mencakup 60% teratas dan menyisakan 200 piksel tamanmu.</p>',
      'tl': '<p>Ang <code>grid-template</code> ay shorthand property na pinagsama ang <code>grid-template-rows</code> at <code>grid-template-columns</code>.</p><p>Halimbawa, gagawa ang <code>grid-template: 50% 50% / 200px;</code> ng grid na may tig-50% na row, at isang column na 200 pixels ang lapad.</p><p>Try mo gamitin ang <code>grid-template</code> para diligan ang area na kasama ang 60% sa taas at 200 pixels sa kaliwa ng hardin mo.</p>',
      'al': '<p><code>grid-template</code> është një metodë që kombinon <code>grid-template-rows</code> dhe <code>grid-template-columns</code>.</p><p>Për shembull, <code>grid-template: 50% 50% / 200px;</code> do të krijojë një grid me dy rrjeshta që janë 50% secili, dhe një kolonë e cila është 200 pixel e gjerë.</p><p>Provoni të përdorni <code>grid-template</code> për të ujitur një zonë që përfshin 60% të fillimit lartë dhe 200 pixel në të majtë të kopështit tuaj.</p>',
    },
    board: 'c',
    style: {'grid-template': '60% 1fr / 200px 1fr'},
    before: "#garden {\n  display: grid;\n",
    after: "}\n\n#water {\n  grid-column: 1;\n  grid-row: 1;\n}"
  },
  {
    name: 'grid-template 2',
    instructions: {
      'en': '<p>Your garden is looking great. Here you\'ve left a 50 pixel path at the bottom of your garden and filled the rest with carrots.</p><p>Unfortunately, the left 20% of your carrots have been overrun with weeds. Use CSS grid one last time to treat your garden.</p>',
      'lv': '<p>Tavs burkānu dārzs izskatās lieliski. Apakšā izlēmi atstāt brīvu 50 pikseļu laukumu, bet pārējais ir aizpildīts ar burkāniem. Par nelaimi, kreisajā malā 20% no burkāniem ir apauguši ar nezālēm. Vēl pēdējo reizi pielieto CSS "grid" un saved kārtībā savu burkānu dārzu!</p>',
      'ro': '<p>Grădina ta arată foarte bine. Aici ai lăsat o cale de 50 pixeli în partea de jos a grădinii și ai ocupat restul cu morcovi.</p><p>Din păcate, 20% din morcovii tăi din stânga au fost invadați cu buruieni. Folosește CSS grid pentru ultima oară pentru a trata grădina ta.</p>',
      'zh-cn': '<p>你的花园看起来很棒。现在，你在花园的底部留下了50像素的小路，其他的空间用来种植胡萝卜。</p><p>不幸的是，胡萝卜地的20%已经杂草丛生了，最后一次用CSS网格布局来规划你的花园吧！</p>',
      'zh-tw': '<p>你的花園看起來很棒。現在，你在花園的底部留下了 50 像素的小路，其他的空間用來種植胡蘿蔔。</p><p>不幸地是，胡蘿蔔地的 20% 已經雜草叢生了，最後一次 CSS 網格佈局來規劃你的花園吧！</p>',
      'tr': '<p>Bahçeniz harika görünüyor. Burada, bahçenizin alt kısmında 50 piksel yol bıraktınız ve kalanını havuçla doldurdunuz.</p><p>Ne yazık ki, havuçlarınızın kalan %20\'si solucanlar ve yabani otlarla doldu. Bahçenizi son bir kez tedavi etmek için  CSS Grid kullanın.</p>',
      'fr': '<p>Votre jardin a l\'air très bien. Ici, vous avez laissé un chemin large de 50 pixels en bas de votre jardin et vous avez rempli le reste avec des carottes.</p><p>Malheureusement, 20 % de vos carottes à gauche ont été envahies par les mauvaises herbes. Utilisez la grille CSS une dernière fois pour traiter votre jardin.</p>',
      'de': '<p>Dein Garten sieht großartig aus. Hier hast du einen 50 Pixel hohen Pfad am unteren Rand des Gartens gelassen und den Rest mit Karotten aufgefüllt.</p><p>Unglücklicherweise wurden die linken 20% deiner Karotten mit Unkraut überwuchert. Benutze CSS Grid ein letztes Mal, um deinen Garten zu behandeln.</p>',
      'nl': '<p>Je tuin ziet er geweldig uit. Hier heb je een pad van 50 pixels onderaan je tuin, en de rest heb je gevuld met wortels.</p><p>Helaas is de linker 20 % van je tuin overwoekerd met onkruid. Gebruik CSS Grid nog een laatste keer om je tuin te behandelen.</p>',
      'pt-br': '<p>Sua horta está parecendo ótima. Aqui você tem 50 pixels no rodapé da sua horta e o resto preenchido com cenouras. Infelizmente, 20% das suas cenouras foram danificadas com ervas daninhas. Use CSS grid uma última vez para tratar sua horta.</p>',
      'ru': '<p>Сад выглядит прекрасно. Здесь вы оставили 50-пиксельную дорожку снизу и заполнили всё оставшееся пространство морковью.</p><p>К сожалению, левые 20% сада заполонили сорняки. Используйте CSS Grid Layout в последний раз, чтобы очистить сад.</p>',
      'pl': '<p>Twój ogród wygląda świetnie. Tutaj pozostawiłeś 50 pixelową ścieżkę na spodzie swojego ogrodu, a reszcie posadziłeś marchewki.</p><p>Niestety, 20% od lewej twoich marchewek zostało zarośnięte przez chwasty. Użyj CSS grid ostatni raz aby uzdrowić swój ogród.</p>',
      'es': '<p>Tu jardín tiene una pinta genial. Esta vez se ha dejado un camino de 50 píxeles de ancho en el fondo de tu jardín y se ha llenado el resto con zanahorias.</p><p>Desafortunadamente, el 20% izquierdo de tus zanahorias han sido invadidas por malas hierbas. Usa CSS Grid una última vez para tratar tu jardín.</p>',
      'sv': '<p>Din trädgård ser fantastisk ut! Här har du lämnat en 50 pixlars yta vid botten och fyllt ut resten av morötter.</p><p>Tyvärr så har de 20% av morötterna till vänster i trädgården blivit överväxta av ogräs. Använd CSS Grid en sista gång för att fixa din trädgård.</p>',
      'fa': '<p>باغ شما عالی به نظر می رسد. در اینجا شما یک مسیر 50 پیکسلی در پایین باغ خود باقی گذاشته اید و بقیه آن را با کاشت هویج پر کرده اید.</p><p>متأسفانه, به 20 درصد از هویج های شما علف هرز زده است. برای بار آخر از سی اس اس گرید برای نجات باغ خود استفاده کنید.</p>',
      'it': '<p>Il tuo giardino sta crescendo davvero bene. Qui hai un sacco di carote, a parte gli ultimi 50 pixel in fondo.</p><p>Sfortunatamente, il 20% sinistro delle tue carote è stato infestato dalle erbacce. Usa CSS grid per l\'ultima volta per curare il tuo giardino.</p>',
      'ko': '<p>당신의 정원은 멋지다. 여기 정원 바닥 50px을 남겨두고 나머지 모두를 당근으로 채웠습니다.</p><p>불행하게도, 당신의 당근 왼쪽 20%는 잡초로 우거져 있습니다. 정원의 치료를 위해 CSS grid를 사용해보시기 바랍니다.</p>',
      'el': '<p>Ο κήπος σας φαίνεται να πηγαίνει καλά. Εδώ έχετε αφήσει ένα μονοπάτι 50 pixel στο κάτω μέρος του κήπου σας και έχει γεμίσει το υπόλοιπο με καρότα.</p><p>Δυστυχώς, το αριστερό 20% των καρότων σας έχει κατακλυστεί με ζιζάνια. Χρησιμοποιήστε το CSS Grid μια τελευταία φορά για να περιποιηθείτε τον κήπο σας.</p>',
      'ja': '<p>ガーデンは素晴らしい状態になったようです。今、ガーデンの下部に残った 50 ピクセルのあぜ道を除いて、すべてニンジンが育っています。</p><p>残念ながら、左 20% のニンジンは雑草に覆われてしまいました。CSS グリッドを使って、最後にもう一度だけガーデンの手入れをしましょう。</p>',
      'ua': '<p>Ваш сад виглядає чудово. Тут ви залишили 50 піксельний шлях в нижній частині вашого саду і заповнили все що залишилося морквою.</p><p>На жаль, ліві 20% вашої моркви заполонили бур\'яни. Використовуйте CSS Grid в останній раз щоб очистити ваш сад.</p>',
      'no': '<p>Hagen din ser flott ut. Her har du laget en sti på 50 pixler i bunnen av hagen din og fylt resten med gulrøtter.</p><p>Uheldigvis har 20% av gulrøttene dine til venstre blitt overgrodd av ugress. Bruk CSS grid en siste gang for å hjelpe hagen din.</p>',
      'pt-pt': '<p>A tua horta está a ficar genial! Desta vez deixaste um caminho de 50 pixels no fundo da horta, e preencheste o resto com cenouras. Infelizmente, 20% das tuas cenouras à esquerda foram invadidas por ervas daninhas. Utiliza a CSS Grid uma última vez para tratares da tua horta.</p>',
      'bg': '<p>Вашата градина изглежда прекрасно. Тук сте оставили пътека от 50 пиксела на дъното на Вашата градина, а останалото пространство е покрито с моркови.</p><p>За жалост, левите 20% от Вашите моркови са обраснали с плевели. Използвайте CSS grid още един последен път, за да излекувате Вашата градина.</p>',
      'ca': '<p>El jardí té un aspecte genial. Aquesta vegada hem deixat un camí de 50 píxels d\'amplada al fons i s\'ha emplenat la resta amb pastanagues.</p><p>Malauradament, el 20% esquerra de les pastanagues han estat conquerides per males herbes. Utilitza CSS Grid una darrera vegada per tractar el jardí.</p>',
      'vi': '<p>Khu vườn của cậu trông tuyệt vời!. Cậu đã để 1 đường dẫn rộng 50px phía dưới cùng và trồng cà-rốt cho khoảng đất trống còn lại.</p><p>Thật không may, 20% không gian bên trái đã bị cỏ dại chiếm. Hãy dùng CSS grid một lần cuối để chăm cho khu vườn của mình nhé.</p>',
      'ar': '<p> حديقتك تبدو رائعة, هنا لقد تركت مسار بحجم 50 بيكسل اسفل حديقتك وملات باقي الحديقة بالجزر </p> <p> لاسف, ال20% المتبقية من الجزر لقد تم تجاوزها بالاعشاب الضارة. استخدم الجريد للمرة الاخيرة لعلاج حديقتك</p> ',
      'fi': '<p>Näyttääpä puutarhassa hienolta. Tässä olet jättänyt 50 kuvapisteen (px) levyisen polun puutarhan alareunaan ja istuttanut muualle porkkanoita.</p><p>Valitettavasti rikkaruohot ovat vallanneet 20% porkkanoista vasemmassa reunassa. Hoivaa puutarhaasi vielä kerran CSS grid -määrityksillä.</p>',
      'hu': '<p>Jól néz ki a kerted! Elhagytál egy 50 pixeles részt a kerted aljában útnak, a többi répával van tele.</p><p>Sajnos a répafölded bal 20%-át benőtte a gyom. Használd a CSS rácsot még egy utolsó alkalommal a kerted ápolásához!</p>',
      'id': '<p>Tamanmu terlihat bagus. Di sini kamu telah menyisakan jalur 50 pixel di bagian bawah tamanmu dan mengisi sisanya dengan wortel.</p><p>Sayangnya, 20% wortelmu yang tersisa telah ditempati rumput liar. Gunakan grid CSS untuk terakhir kalinya untuk merawat tamanmu.</p>',
      'tl': '<p>Ganda ng hardin mo. Nag-iwan ka dito ng 50 pixel na daanan sa baba ng hardin mo at nilagyan ng mga karot ang natitira.</p><p>Kaso, \'yung 20% sa kaliwa ng mga karot ay kumakalat ang mga damo. Gumamit ng CSS grid sa huling pagkakataon para ayusin ang hardin mo.</p>',
      'al': '<p>Kopështi juaj po duket shumë mirë. Këtu juve keni lënë një shteg prej 50 picel në fund të kopështit tuaj dhe mbushur pjesën e ngelur me karota.</p><p>Fatkeqësisht, 20% e karotave tuaja në të majtë janë mbuluar nga shkurret. Përdorni CSS grid një herë të fundit për të rregulluar kopështin tuaj.</p>',
    },
    board: 'wc',
    classes: {'#plants': 'grid-template-2'},
    style: {'grid-template': '1fr 50px / 20% 1fr'},
    before: "#garden {\n  display: grid;\n",
    after: "}"
  }
];

var levelWin = {
  name: 'win',
  instructions: {
    'en': '<p>You win! By the power of CSS grid, you were able to grow enough carrots for Froggy to bake his world famous 20-carrot cake. What, were you expecting a different hoppy friend?</p><p>If you enjoyed Grid Garden, be sure to check out <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a> to learn about another powerful new feature of CSS layout. You can also find new coding games over at <a href="https://codepip.com">Codepip</a>.</p><p>Want to support Grid Garden? Spread the word to your friends and family about Grid Garden!</p>',
    'lv': '<p>Tu uzvarēji! Izmantojot CSS "grid", tu spēji izaudzēt pietiekami daudz burkānu, lai vardulēns "Froggy" varētu uzcept pasaulē zināmo 20 burkānu kūku. Vai gaidīji citu lēkājošu dzīvnieku šajā apsveikumā?</p><p>Ja tev patika Grid Garden, tad noteikti ievērtē <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a> un apgūsti vēl vienu ļoti noderīgu CSS metodi. Seko līdzi citiem maniem projektiem  <a href="https://thomaspark.co">my blog</a> vai <a href="https://twitter.com/thomashpark">Twitter</a></p><p>Vēlies atbalstīt Grid Garden? Pamēģini augstākās klases dizaina un programmēšanas kursus no<a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a>. Kā arī neaizmirsti iepazīstināt savus draugus ar Grid Garden!</p>',
    'ro': '<p>Ai câștigat! Prin puterea CSS grid, ai reușit să crești destui morcovi ca Froggy să-și gătească tortul renumitde 20 de morcovi. Ce, te așteptai la un alt prieten care țopăie?</p><p>Dacă ai savurat Grid Garden, vezi și <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a> pentru a învăța un nou feature foarte puternic de CSS layout. Poți de asemenea să fii la curent cu celelalte proiecte ale mele pe <a href="https://thomaspark.co">blogul meu</a> sau <a href="https://twitter.com/thomashpark">Twitter</a>.</p><p>Vrei să susții Grid Garden? Încearcă cursurile de web design și programare oferite de <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a>. Și împrăștie vestea prietenilor și familiei despre Grid Garden!</p>',
    'zh-cn': '<p>恭喜你赢得了游戏！通过CSS网格的力量，你能够生长足够的胡萝卜给青蛙，让它用来烘焙世界闻名的 20 胡萝卜蛋糕。什么？你期待一个不同的蹦跳的朋友吗？</p><p>如果你喜欢网格花园，一定也要查看<a href="https://codepip.com/games/flexbox-froggy/">Flexbox 青蛙</a>哦，你可以学习另外一种强大的CSS布局方式。你也可以随时查看我最新<a href="https://thomaspark.co">博客</a>或<a href="https://twitter.com/thomashpark">推特</a>上的其他项目。</p><p>想要支持网格花园么？快来体验下<a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a>所提供的一流网页设计和编码课程。最后，也欢迎您向您的朋友和家人推荐网格花园！感谢！</p>',
    'zh-tw': '<p>恭喜你贏得了遊戲！通過 CSS 網格的力量，你能夠種出足夠的胡蘿蔔給青蛙來烘焙世界聞名的 20 胡蘿蔔蛋糕。什麼？你期待一個不同的蹦跳的朋友嗎？</p><p>如果你喜歡網格花園，一定也要查看 <a href="https://codepip.com/games/flexbox-froggy/">Flexbox 青蛙</a> 哦，你可以學習另外一種強大的 CSS 佈局方式。你也可以隨時查看我最新<a href="https://thomaspark.co">部落格</a>或<a href="https://twitter.com/thomashpark">推特</a>上的其他專案。</p><p>想要支持網格花園嗎？快來體驗下 <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a> 所提供的一流網頁設計和編碼課程。最後，也歡迎向您的朋友和家人推薦網格花園！</p>',
    'tr': '<p>Sen kazandın! CSS Grid\'in gücü sayesinde, Froggy\'nin dünyaca ünlü 20 havuçlu kekini pişirmeye yetecek kadar havuç büyütmüştünüz. Ne?! Farklı bir dost arkadaş mı bekliyordunuz?</p><p>Grid Garden\'dan memnun kaldıysanız, <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a> adresini kontrol ederek CSS düzeninin yeni ve güçlü bir başka özelliği hakkında bilgi edinin. Ayrıca, diğer projelerimi <a href="https://thomaspark.co">blogumda</a> veya <a href = "https://twitter.com/thomashpark">Twitter</a> adresinden takip edebilirsin..</p><p>Grid Garden\'ı desteklemek ister misiniz? <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a> tarafından sunulan en üst düzey web tasarım ve kodlama derslerini deneyin. Ve Grid Garden sözcüğünü arkadaşlarınıza ve ailenize yayın!</p>',
    'fr': '<p>Vous avez gagné ! Par la puissance de la grille CSS, vous avez pu cultiver suffisamment de carottes pour Froggy pour faire cuire son célèbre gâteau de 20-carottes. Quoi, vous vous attendiez à un ami différent ?</p><p>Si vous avez apprécié Grid Garden, veuillez consulter <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a> pour en savoir plus sur une nouvelle fonctionnalité puissante sur la mise en page CSS. Vous pouvez également vous tenir au courant de mes autres projets sur <a href="https://thomaspark.co">mon blog</a> ou sur <a href="https://twitter.com/thomashpark">Twitter</a>.</p><p>Vous voulez soutenir Grid Garden ? Essayez les cours de conception et de codage proposés par <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a>. Et passez le mot à vos amis et à votre famille au sujet de Grid Garden !</p>',
    'de': '<p>Du hast gewonnen! Mit der Macht von CSS Grid hast du es geschafft, genügend Karotten anzubauen für Froggy, so dass er seinen weltberühmten 20-Karotten-Kuchen backen kann. Was, du hast einen anderen hoppelnden Freund erwartet?</p><p>Falls dir Grid Garden gefallen hat, schau dir auch mal <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a> an, um etwas über einen weiteren neuen und mächtigen Bestandteil von CSS Layout zu lernen. Du kannst auch über meine anderen Projekte auf dem Laufenden bleiben auf <a href="https://thomaspark.co">meinem Blog</a> oder via <a href="https://twitter.com/thomashpark">Twitter</a>.</p><p>Willst du Grid Garden unterstützen? Probiere die erstklassigen Design- und Programmier-Kurse aus, die von <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a> angeboten werden. Und erzähle deinen Freunden und deiner Familie von Grid Garden!</p>',
    'nl': '<p>Je hebt gewonnen! Door de kracht van het CSS Grid was je in staat om genoeg wortels te groeien voor Froggy om zijn wereldberoemde 20-wortels cake te bakken. Wat, verwachtte je een andere springende vriend?</p><p>Als je Grid Garden leuk vond, vergeet dan niet om <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a> te proberen, om te leren over een andere krachtige CSS lay-out. Je kan ook op de hoogte blijven van mijn andere projecten op <a href="https://thomaspark.co">mijn blog</a> of <a href="https://twitter.com/thomashpark">Twitter</a>.</p><p>Wil je Grid Garden ondersteunen? Probeer de geweldige web design en programmeercursussen aangeboden door <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a>. En vertel verder aan je vrienden en familie over Grid Garden!</p>',
    'pt-br': '<p>Você ganhou! Com o poder do CSS grid, você foi capaz de colher cenouras suficientes para o Froggy fazer seu mundialmente famoso bolo de 20 cenouras. O que, você esperava um amigo diferente?</p><p>Se você gostou do Grid Garden, veja também o <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a> para aprender sobre outra funcionalidade poderosa dos leiautes CSS. Você também pode se manter atualizado com meus outros projetos em <a href="https://thomaspark.co">meu blog</a> ou <a href="https://twitter.com/thomashpark">Twitter</a>.</p><p>Deseja ajudar o Grid Garden? Faça os cursos de web design e codificação oferecidos por <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a>. E semeie para seus amigos e família o Grid Garden!</p>',
    'ru': '<p>Вы победили! Благодаря силе CSS Grid Layout вы смогли вырастить достаточно моркови для Froggy, чтобы испечь его знаменитый 20-морковный пирог. Что, ожидали другого прыгучего друга?</p><p>Если вам понравился Grid Garden, посмотрите <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a>, чтобы изучить другие новые возможности CSS. Вы также можете следить за моими проектами в <a href="https://thomaspark.co">моём блоге</a> или <a href="https://twitter.com/thomashpark">в твиттере</a>.</p><p>Хотите поддержать Grid Garden? Зацените топовые курсы веб-дизайна и программирования от <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a>. И расскажите своим друзьям и семье про Grid Garden!</p>',
    'pl': '<p>Wygrałeś! Dzięki możliwościom CSS grid, byłeś w stanie wychodować wystarczającą ilość marchewek dla Pana Żabki, aby on mógł upiec swoje światowej sławy ciasto marchewkowe. Co, spodziewałeś się innego skocznego przyjaciela?</p><p>Jeżeli spodobał Ci się Grid Garden, zobacz też <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a> aby nauczyć się o innej nowej i potężnej właściwości struktury CSS. Możesz także śledzić inne moje projekty poprzez <a href="https://thomaspark.co">mój blog</a> lub <a href="https://twitter.com/thomashpark">Twitter</a>.</p><p>Chcesz wesprzeć Grid Garden? Wypróbuj znakomite kursy z web designu i programowania na <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a>. Podziel się także informacją o Grid Garden z przyjaciółmi i rodziną!</p>',
    'es': '<p>¡Has ganado! Por el poder de CSS Grid, has sido capaz de cultivar suficientes zanahorias para que Froggy pueda cocinar su mundialmente famosa tarta de 20 zanahorias. Qué, ¿esperabas a algún amigo diferente?</p><p>Si has disfrutado de Grid Garden, échale un vistazo a <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a> para aprender otra nueva característica de diseño en CSS. También puedes mantenerte al día de mis otros proyectos en <a href="https://thomaspark.co">mi blog</a> o <a href="https://twitter.com/thomashpark">Twitter</a>.</p><p>¿Quieres apoyar Grid Garden? Prueba los mejores cursos de diseño web y programación ofrecidos por <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a>. ¡Y comparte Grid Garden con tus amigos y familia!</p>',
    'sv': '<p>Du vinner! Genom att utnyttja CSS grid har du odlat nog med morötter för Froggy att baka sin världsberömda 20-morots kaka.</p><p>Ifall du gillade Grid Garden, testa också <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a> för att lära dig mer om CSS layout. Du kan också följa mina andra projekt på <a href="https://thomaspark.co">min blogg</a> eller <a href="https://twitter.com/thomashpark">Twitter</a>.</p><p>Vill du stödja Grid Garden? Testa högkvalitativa webbdesign och kodningskurser av <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a>. Sprid gärna ordet om Grid Garden till vänner och familj! Tack!</p>',
    'fa': '<p>شما برنده شدید! با قدرت سی اس اس گرید, تونستی هویج کافی برای پخت کیک معروف 20-هویج خاله قورباغه رو تامین کنی. چیه, انتنظار داشتی کس دیگه ای باشه؟</p><p>اگر از بازی باغ گرید لذت بردی, حتما سری به <a href="https://codepip.com/games/flexbox-froggy/">قورباغه فلکس باکس</a> بزن  تا یه ویژگی جدید و قدرتمند دیگه از سی اس اس رو یاد بگیری. همینطور می تونی از پروژه های دیگه من از طریق <a href="https://thomaspark.co">وبلاگ من</a> یا <a href="https://twitter.com/thomashpark">توییتر</a> باخبر بشی.</p><p>می خوای از باغ گرید حمایت کنی؟ آموزش های فوق العاده طراحی وب و کدنویسی که توسط  <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a> ارائه شده رو امتحان کن. و یادت نره که در مورد باغ گرید به دوستان و خانواده ات اطلاع رسانی کنی!</p>',
    'it': '<p>Hai vinto! Con il potere delle CSS grid, sei stato in grado di coltivare abbastanza carote per Froggy per preparare la sua torta 20-carote conosciuta in tutto il Mondo. Cosa, stavi aspettando qualche altro amico?</p><p>Se ti sei divertito con Grid Garden, dai un occhio anche a <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a> per imparare un\'altro potente metodo per creare layout con il CSS. Puoi anche tenerti aggiornato con i miei altri progetti sul <a href="https://thomaspark.co">mio blog</a> o su <a href="https://twitter.com/thomashpark">Twitter</a>.</p><p>Vuoi supportare Grid Garden? Prova a dare un occhio ai corsi di web design e programmazione offerti da <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a>. E condividi Grid Garden con i tuoi amici e parenti!</p>',
    'ko': '<p>CSS grid의 힘으로 당신이 이겼습니다. 너는 Froggy가 세계적으로 유명한 20캐럿 당근 케이크를 만들 수 있도록 많은 양의 당근을 길렀습니다. 뭐, 다른 취미를 가진 친구를 기대했었나요?</p><p>너가 Grid Garden를 재미있게 즐겼다면, <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a>를 확인하여 CSS 레이아웃의 또 다른 강력한 새로운 기능을 배워보세요. 또한 나의 다른 프로젝트들을 <a href="https://thomaspark.co">my blog</a>혹은 <a href="https://twitter.com/thomashpark">Twitter</a>를 통해 최신정보를 받아볼 수 있습니다.</p><p>Grid Garden을 도와주고 싶으신가요? <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a>에서 제공하는 최고 수준의 웹 디자인 및 코딩 과정을 이용해 보세요. 그리고 Grid Garden에 대해 친구와 가족들에게 알려주세요!</p>',
    'el': '<p>Νικήσατε! Με την δύναμη του CSS Grid, μπορέσατε να μεγαλώσετε αρκετά καρότα ώστε ο Froggy να φτιάξει το παγκόσμιας φήμης κέικ του με 20 καρότα. Τι, περιμένατε έναν διαφορετικό χοροπηδηχτό φίλο;</p><p>Αν απολαύσατε το Grid Garden, ελέγξτε το <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a> για να μάθετε για ένα άλλο ισχυρό νέο χαρακτηριστικό της διάταξης CSS. Μπορείτε επίσης να ενημερώνεστε με τα άλλα έργα μου στο <a href="https://thomaspark.co">blog μου</a> ή στο <a href="https://twitter.com/thomashpark">Twitter</a>.</p><p>Θέλετε να υποστηρίξετε το Grid Garden? Δοκιμάστε τα εξαιρετικά μαθήματα web design και προγραμματισμού που προσφέρονται από το <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a>. Και διαδώστε την φήμη του Grid Garden στους φίλους και την οικογένειά σας!</p>',
    'ja': '<p>クリアです！CSS グリッドの力のおかげ、Froggy の世界で有名な20キャロットケーキを焼くために十分な量のニンジンを育ててあげることができました。えっ？Froggy ではなくて、びょこびょこ跳ぶ別の友だちを予想していました？</p><p>もし Grid Garden を楽しんでもらえたのだとしたら、CSS レイアウトというもう1つの強力な新機能を <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a> で学んでみてください。最新情報については、私のもう一つのプロジェクトである<a href="https://thomaspark.co">ブログ</a>や <a href="https://twitter.com/thomashpark">Twitter</a> でも発信してます。</p><p>Grid ガーデンの支援をしたいと思ってくれた人は、<a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a> で提供されている topnotch のウェブデザイン・コーディングコースを見てみてください。また、感想を教えてくれたり、友だちや家族に Grid Garden のことを話してくれたら嬉しいです！</p>',
    'ua': '<p>Ви виграли! Завдяки силі CSS Grid, ви змогли виростити досить моркви для Froggy щоб спекти його знаменитий 20-морквяний пиріг. Що, ви очікували іншого стрибучого товариша?</p><p>Якщо вам сподобався Grid Garden, подивіться <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a> щоб вивчити іншу нову можливість CSS. Ви також можете залишатися в курсі всіх моїх проектів <a href="https://thomaspark.co">мій блог</a> або <a href="https://twitter.com/thomashpark">Twitter</a>.</p><p>Хочете підтримати Grid Garden? Спробуйте "topnotch" веб-дизайну і курси програмування запропоновані <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a>. Розкажіть своїм друзям і членам сім\'ї про Grid Garden!</p>',
    'no': '<p>Du har vunnet! Ved bruk av CSS grid, har du klart å kultivere nok gulrøtter til at Froggy kan bake sin verdensberømte 20-gulrotskake. Hæ, forventet du en annen hoppende venn?</p><p>Hvis du likte Grid Garden, ta også en titt på <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a> for å lære mer om enda en ny og effektiv metode for å lage layouts med CSS. Du kan også holde deg oppdatert på andre projekter jeg holder på med på <a href="https://thomaspark.co">bloggen min</a> eller <a href="https://twitter.com/thomashpark">Twitter</a>.</p><p>Har du lyst til å støtte Grid Garden? Prøv ut flotte webdesign- og kodekurs tilbudt av <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a>. Og del Grid Garden med venner og familie!</p>',
    'pt-pt': '<p>Ganhaste! Com o poder da CSS Grid, conseguiste cultivar cenouras suficientes para o Froggy fazer o seu mundialmente famoso bolo de 20 cenouras. O quê, esperavas um amigo diferente?</p><p>Se desfrutaste do Grid Garden, visita também o <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a> para aprenderes sobre outra nova funcionalidade poderosa dos layouts CSS. Também podes ficar a par dos meus outros projectos no <a href="https://thomaspark.co">meu blog</a> ou <a href="https://twitter.com/thomashpark">Twitter</a>.</p><p>Queres apoiar o Grid Garden? Experimenta os melhores cursos de web design e programação oferecidos por <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a>. E mostra aos teus amigos e família o Grid Garden!</p>',
    'bg': '<p>Вие спечелихте! С помощта на CSS grid, Вие успяхте да отгледате достатъчно моркови за Froggy, таке че той да може да изпече своята популярна 20-морковена торта. Какво, да не би да очаквахте различен скоклив приятел?</p><p>Ако Grid Garden Ви е харесала, поиграйте и <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a>, за да научите друга много използвана техника в CSS Layout. Също така можете да следите и останалите ми проекти в <a href="https://thomaspark.co">моя блог</a> или <a href="https://twitter.com/thomashpark">Twitter</a>.</p><p>Искате да помогнете на Grid Garden? Опитайте първокласните курсове за уеб дизайн и програмиране предложени от <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a>. Кажете и по дума на Вашите приятели и семейство за Grid Garden!</p>',
    'ca': '<p>Has guanyat! Amb el poder de CSS Grid, has estat capaç de cultivar suficients pastanagues per que Froggy pugui cuinar la seva mundialment famosa coca de 20 pastanagues. Què, esperaves algun amic diferent?</p><p>Si has gaudit de Grid Garden, fes una ullada a <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a> per aprendre una altra nova característica de disseny amb CSS. També pots mantenir-te al dia dels meus altres projectes a <a href="https://thomaspark.co">el meu blog</a> o <a href="https://twitter.com/thomashpark">Twitter</a>.</p><p>Vols recolzar Grid Garden? Prova els millors cursos de disseny web i programació oferts per <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a>. I comparteix Grid Garden amb els teus amics i familiars!</p>',
    'vi': '<p>Thắng rồi! với sức mạnh của CSS grid, cậu đã có đủ cà-rốt để Froggy làm nên chiếc bánh siêu phẩm 20 củ cà-rốt. Huh, cậu có đang mong chờ một người bạn thú vị khác?</p><p>Nếu cậu cảm thấy thú vị với Grid Garden, hãy xem thử một game khác là <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a> để học thêm về những tính năng mạnh mẽ khác của CSS layout. Cậu cũng có thể xem thêm những game khác tại <a href="https://codepip.com">Codepip</a>.</p><p>Cậu muốn ủng hộ cho Grid Garden? Hãy xem qua các khóa học về lập trình và thiết kế web của <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a>. Đừng quên giới thiệu với bạn bè về Grid Garden nhé!</p>',
    'ar': '<p>  لقد فزت ! من خلال قوة سي اس اس جريد, تمكنت من زراعة مايكفي من الجزر ل Froggy  لخبز كعكة ال 20 جزرة الشهيرة. هل كنت تتوقع صديقا مختلفا ؟ </p>اذا استمتعت بلعب لعبة CSS grid,  لا تنسى مراجعة لعبة <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a> لتعلم المزيد حول ميزة جديدة لتخطيط CSS . يمكنك العثور ايضا على العاب تكويد جديدة على <a href="https://codepip.com">Codepip</a>.</p> <p> هل تريد دعم CSS grid  ؟ جرب دورات تصميم الويب والتكويد ن الدرجة الاولى التي قدمها <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a> واخبر اصدقائك حول اللعبة ! </p>',
    'fi': '<p>Onnea! Onnistuit kasvattamaan riittävästi porkkanoita CSS grid -asettelun avulla, ja nyt sammakkoystävämme Froggy pääsee leipomaan maailmankuulun 20 porkkanan kakkunsa.</p><p>Jos pidit Grid Gardenista, kokeile myös <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a> -peliä, jossa tutustut toiseen uuteen CSS-asetteluun. Lisää koodailupelejä löytyy <a href="https://codepip.com">Codepip</a>-sivustolta.</p><p>Haluatko tukea Grid Gardenia? Tutustu <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehousen</a> websuunnittelu- ja koodauskursseihin. Äläkä unohda kertoa Grid Gardenista myös ystävillesi ja perheenjäsenillesi!</p>',
    'hu': '<p>Győztél! A CSS rács erejével sikerült elég répát termelned Froggynak, hogy megsüsse világhírű 20 répás sütijét. Hogyan? Te egy másik ugrándozó pajtásodra számítottál?</p><p>Ha élvezetesnek találtad a Grid Gardent, akkor próbáld ki a <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a>-t is, hogy megismerd a CSS elrendezés egy másik új, hatékony funkcióját! A <a href="https://codepip.com">Codepip</a> oldalon újabb kódoló játékokat is találhatsz.</p><p>Szeretnéd támogatni a Grid Gardent? Próbáld ki a <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a> által kínált csúcskategóriás webtervezési és programozási kurzusokat! Terjeszd barátaid és családtagjaid körében a Grid Garden hírét!</p>',
    'id': '<p>Kamu menang! Dengan kekuatan grid CSS, Anda dapat menanam cukup banyak wortel untuk Froggy untuk dia memanggang kue 20 wortelnya yang terkenal di dunia. Apakah Anda mengharapkan teman hoppy yang berbeda?</p><p>Jika kamu menikmati Grid Garden, pastikan untuk memeriksanya <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a> untuk mempelajari tentang fitur baru yang powerful lainnya dari tata letak CSS. Anda juga dapat menemukan game coding baru di <a href="https://codepip.com">Codepip</a>.</p><p>Ingin mendukung Grid Garden? Cobalah kursus desain dan coding web terbaik yang ditawarkan oleh <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a>. Dan sebarkan berita kepada teman dan keluarga Anda tentang Grid Garden!</p>',
    'tl': '<p>Nanalo ka! Sa kakayahan ng CSS grid, nagawa mong magpalaki ng sapat na karot para kay Froggy para ma-bake niya ang kanyang tanyag na 20-carrot cake. Ha? Ibang hoppy friend ang ine-expect mo?</p><p>Kung na-enjoy mo ang Grid Garden, siguraduhing tingnan ang <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a> para matuto sa bagong powerful feature ng CSS layout. Makakahanap ka rin ng coding games sa <a href="https://codepip.com">Codepip</a>.</p><p>Gusto mo suportahan ang Grid Garden? Subukan mo ang pangmalakasang web design at coding courses na ino-offer ng <a href="https://treehouse.7eer.net/c/371033/228915/3944?subId1=gridgarden">Treehouse</a>. At ipakalat mo ang balita sa mga friend at pamilya mo tungkol sa Grid Garden!</p>',
    'al': '<p>Juve fituat! Me fuqinë e CSS grid, juve mundët të rrisni aq karota për Froggy që ai të pjekë tortën e tij 20 karotëshe me famë botërore. Çfarë, po prisnit një tjetër shok të gëzuar?</p><p>Nëse ju pelqeu Grid Garden, sigurohuni që të shikoni <a href="https://codepip.com/games/flexbox-froggy/">Flexbox Froggy</a> për të mësuar një cilësi tjetër të fuqishme të CSS layout. Ju gjithashtu mund të gjeni lojëra të reja kodimi në <a href="https://codepip.com">Codepip</a>.</p><p>Doni të suportoni Grid Garden? Shperndajeni fjalën tek miqtë dhe familja juaj rreth Grid Garden!</p>',
  },
  board: '',
  classes: {'#garden, #plants, #overlay': 'win'},
  style: {},
  before: "#pond {\n  display: flex;\n",
  after: "}"
};