Employ CSS Grid to properly position the crimson section within the confines of the scarlet border on Level 77 of Grid Attack

I spent hours struggling with level 77 of Coding Fantasy: Grid Attack. No matter what I tried, nothing seemed to work. There are no solutions provided in the game, and there's no way to skip the level. Can anyone help me with the solution please? 😢

The challenge is to fit the red land into the red border shown in the image below using grid-auto-rows, align-content, and span.

CSS

#field {
  display: grid;
  grid-template-columns: repeat(auto-fill, 1fr);
  /* add your code here */
  
}

#field div:nth-child(3n) {
  /* add your code here */
  
}

HTML

<div id="field">
  <div class="greenLand"></div>
  <div class="redLand"></div>
  <div class="greenLand"></div>
  <div class="redLand"></div>
  <div class="greenLand"></div>
  <div class="redLand"></div>
</div>

I've experimented with various values but haven't been successful yet.

htmlcssflexboxgridcss-grid

Answer â„–1

If you're up late and curious, here's the solution.

I'm feeling accomplished for solving this without resorting to a search, only consulting the docs.

The problem wasn't necessarily difficult; rather, the initial code provided was incorrect, and the grid graphic didn't indicate row heights. I had to estimate it myself.

#field {
  display: grid;
  grid-template-columns: repeat(auto-fit, 1fr);
  /* enter value */
  grid-auto-rows: 100px;
  gap: 15px;
  align-content: space-between;
}
  
#field div:nth-child(3n) {
  /* enter value */
  grid-column: span 3; 
}

grid template columns: Changed from auto-fill to auto-fit as it distributed items better.

grid-auto-rows: Estimated the height based on observation.

The other instructions are pretty straightforward.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Are there any special CSS hacks that only work for IE8?

When it comes to Internet Explorer 8 (IE8), my preference is to utilize the following CSS: color : green; I am looking to implement a hack that exclusively impacts IE8, without affecting IE9, IE6, and 7. ...

cssinternet-explorer-8conditional-comments

The issue with MUI TextField: the outline is overlapping the label

Recently, I encountered an issue with a MUI TextField in my project. In its default state, everything appeared fine: https://i.stack.imgur.com/WFzOr.png However, when I increased the font size as per the theme provided below, the label started to overlap ...

cssreactjsmaterial-ui

Refresh all fields for various products with a single click of a button

Our Magento multi-vendor site allows vendors to easily manage their products. For each single product, vendors can view and update information such as price, selling price, quantity, and more from their vendor account. We have implemented a feature where ...

javascriptphphtmlmagento

What is the best location for storing css files in Laravel?

I've come to realize that I can easily make changes to the app.scss file in my Laravel projects and see those changes reflected by running npm run dev or npm run watch. However, I'm faced with a dilemma when dealing with multiple .css files. Whe ...

csslaravel

One method I use to retrieve ajax data and assign it before rendering the view

Despite putting the ajax.get in the created function, I am still unable to retrieve the ap_name value. This issue is related to vue.js created: function () { ajax.get('/envs').then(function (res) { this.apName = res.AP_NAME; ...

javascripthtmlvue.js

"Customize Bootstrap layout to have a stable width for desktop screens and a flexible width for

I received a psd design with a background for html5-bootstrap development that needed to be responsive. The original psd had a width of over 1200px, with the main container around 900px wide and the background displaying correctly. When converting to HTML ...

csshtmltwitter-bootstrapresponsive-design

Issue with Bootstrap4 card alignment on Chrome browser

Hey there! I could use some assistance with an issue I'm facing in Bootstrap4 cards while using Chrome. The strange thing is that everything seems to be working fine on IE11, but not on Chrome. Take a look at the comparison images below: IE11 layout ...

htmlgoogle-chromelayoutbootstrap-4internet-explorer-11

Connecting JavaScript and jQuery scripts

Help needed! I am a beginner in the world of jQuery and JS. Unfortunately, my JS/jQuery code is not running and I can't figure out why. Can someone please take a look at my HTML and guide me on what might be causing the issue? Do I need to add some ad ...

javascriptjqueryhtmlcss

Utilizing the designated link name

As part of my program, I have to generate hyperlinks for each row in a MySQL table. To accomplish this, I used the C MYSQL API to fetch the data from the table: while ((row = mysql_fetch_row(result))) { ....//some code to print the data.... } I am ab ...

htmlmysqlchyperlinkcgi

AngularJS's support for html5mode on GitHub pages is now available

Is it feasible for GitHub pages to accommodate AngularJS in html5mode? I came across a source online suggesting that it can be done with a fallback page for 404 errors. However, this solution seems flawed as it may result in multiple 404 errors, which wou ...

javascriptangularjshtmlgithub-pages

Why is this strange red dot character 🔴 appearing in the URL in FireFox?

While browsing the web, I came across a website with a strange red blob in the URL. It's something I've never seen before. What could possibly be the reason for this unique feature?! Note that you have to visit the page to see it for yourself. T ...

htmlurlfirefoxcharacter-encoding

What steps should be taken to generate a successful pop-up window post registration in PHP?

beginning section continuation What is the best way to design an effective popup window? ...

javascriptphphtmlnode.jsajax

Can we expect to receive multiple returns?

I have a piece of code and I am looking to add 2 returns to it. What is the correct way to achieve this in PHP? function two_tables($atts, $content = null) { return '<div id="table1"><table class="table table-bordered">'.$co ...

phphtmlreturn

The div is not showing the image as expected

Having some trouble creating a slideshow within my angular application. Struggling to get the images to display in the html code. To tackle this, I decided to create a separate component specifically for the slideshow (carousel.component). In the main app ...

cssangular

Tips on organizing elements

Here are three elements: <!DOCTYPE html> <html lang="en"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.boo ...

htmlcsstwitter-bootstrap-3

Ensuring Uniform Column Height in Bootstrap 4 - Preventing Buttons from Being Forced to the Bottom of

Using the Bootstrap 4 class 'h-100' to ensure equal height for all three columns, I encountered an issue where the buttons that were initially aligned to the bottom of each div are no longer in correct alignment. How can I maintain button alignme ...

htmltwitter-bootstrapcssbootstrap-4

Instructions on how to load an HTTP file inside a Bootstrap modal

Is it possible to load a file located at an http:// address into a modal window? Something like this: <a class="btn btn-info btn-large" data-toggle="modal" href="#http://localhost/login.html"> <i class="icon-user icon-white"></i> Login ...

csstwitter-bootstrap

Making a div equal in height to an image

What I currently have is like this... https://i.stack.imgur.com/7FeSi.png However, this is what I am aiming for. https://i.stack.imgur.com/fn9m0.png The image dimensions are set up as follows... #content img{ padding: 3%; width: 60%; height: 50%; floa ...

htmlcssimage

Issue with maplace.js preventing the display of the Google map

I have followed the setup instructions found at . After loading the maplace.js file on my server, I incorporated the provided code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>minimal maplace</title> < ...

jqueryhtmlgoogle-maps-api-3

Is there a way to change my cursor to a pointer finger when hovering over my box?

<script type="text/javascript"> function draw() { var canvas = document.getElementById('Background'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.lineWidth = 0.4 ctx.strokeRect(15, 135, 240, 40) Is there a w ...

javascripthtmlcss