"Strategically placing elements on an HTML grid

Question

"Strategically placing elements on an HTML grid

My current project involves creating a grid layout in HTML using CSS. The goal is to use this layout for various elements such as images, text, and links.

What I envision is a visually appealing grid where each object fits together seamlessly with no gaps between the 'divs', automatically adjusting based on a predefined size.

I am determined to avoid relying on APIs or libraries for this project and prefer a solution that primarily uses CSS, JavaScript, jQuery, and HTML.

You can view my progress so far at http://jsfiddle.net/AeroMcDoom/quC8V/1/.

Although I have set up a basic 1x1 grid ('.a' with red background), I am relatively new to the positioning concepts in HTML and have been grappling with this challenge for over a week now.

.a {
    width: 100px;
    height: 100px;
    float:left;
    background-color:red;
}

(Note: '.a' represents the 1x1 grid and '.b' is the 2x2 grid)

javascript jquery html css

Answer 1

Answer №1

CSS Grid is a powerful tool that has gained popularity in recent years as a pure HTML/CSS solution for creating layouts. It offers a non-hacking approach to positioning elements exactly where you want them, and it's more reliable than other methods.

If you're interested in learning more about CSS Grid, check out this framework generator:

One of the best resources for mastering CSS Grid is a tutorial series by Rachel Andrew, a respected advocate for this technology. You can watch her videos here:

For a hands-on example of CSS Grid in action, take a look at this CodePen demo: https://codepen.io/quibble/pen/NaKdMo

#wrapper{
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 30px 3px 27px 13px 17px 40px; 
  grid-template-areas:
    "one two three"
    "one five three"
    "one five six"
    "four five six"
    "four five ."
    "four . .";
}
#wrapper>div{
  background-color: gray;
}
.d_1{
  grid-area: one;
}
.d_2{
  grid-area: two;
}
.d_3{
  grid-area: three;
}
.d_4{
  grid-area: four;
}
.d_5{
  grid-area: five;
}
.d_6{
  grid-area: six;
}

Answer 2

CSS Grid is a powerful tool that has gained popularity in recent years as a pure HTML/CSS solution for creating layouts. It offers a non-hacking approach to positioning elements exactly where you want them, and it's more reliable than other methods.

If you're interested in learning more about CSS Grid, check out this framework generator:

One of the best resources for mastering CSS Grid is a tutorial series by Rachel Andrew, a respected advocate for this technology. You can watch her videos here:

For a hands-on example of CSS Grid in action, take a look at this CodePen demo: https://codepen.io/quibble/pen/NaKdMo

#wrapper{
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 30px 3px 27px 13px 17px 40px; 
  grid-template-areas:
    "one two three"
    "one five three"
    "one five six"
    "four five six"
    "four five ."
    "four . .";
}
#wrapper>div{
  background-color: gray;
}
.d_1{
  grid-area: one;
}
.d_2{
  grid-area: two;
}
.d_3{
  grid-area: three;
}
.d_4{
  grid-area: four;
}
.d_5{
  grid-area: five;
}
.d_6{
  grid-area: six;
}

"Strategically placing elements on an HTML grid

Answer №1

Similar questions

Empty area beneath the body in Chrome Device Mode

Issues with jQuery autocomplete when using special characters (Norwegian)

Utilizing global variables in Vue.js while working with the CLI template

When using Express.js for file uploading, it is important to first verify that a file has been sent, set a maximum file size limit, and ensure

"Error: The function $(...).autocomplete is not recognized" in conjunction with Oracle Apex

A step-by-step guide to customizing the Material UI Chips delete SVG icon to appear in white color through

Learn how to utilize interpolation within an *ngIf statement in Angular 2 in order to access local template

Using React to display data from a nested JSON object in a table

When triggered by a click, the function gradually fades in and out. It superimposes one image on top of another, but unfortunately, the sizes

Incorporating unique components dynamically using a loop in React

Encountering a JavaScript/TypeScript issue that reads "Unable to access property 'Items' as it is undefined"

Switch the text display by clicking on a different button in the list

Guide on adjusting image dimensions in JTextPane using HTML and CSS in the Java Swing environment

I am unsure of the process for implementing an OnClick event to modify the colors of a square

Learn how to showcase real-time stock information from Yahoo Finance on an Android device. See the JSON format provided below for guidance

Issue: The variable '$viewMap[...]' is either null or undefined

What is the best way to transfer a data string from my HTML document to my server (using either Node or Express) and trigger a specific function with that data?

Incorporating regular expressions to extract a specific string from a URL is a requirement

Deactivating the Grid and its offspring in React.js MUI

Tips on generating an HTML element using JavaScript and storing it in a MySQL database