What is the best way to recreate this grid-like design using CSS?

By utilizing clever techniques such as margins and outlines, I was able to design the following.

If you'd like to take a look at the live website, it can be found at

https://i.sstatic.net/kl0an.jpg

The CSS code that I used is as follows:

body { margin: auto; max-width: 736px }

span.imgs { display: block; font-size: 0px; margin: 2px }

img { outline: 2px solid white }

img.a { width: 36% }
img.b { width: 64% }

To access the full source code, please visit http://github.com/davidafroivey/davidafroivey.github.io/blob/master/index.html

Is there a way to achieve a similar aesthetic without using outlines? My goal is to incorporate shadows, but outlines tend to obstruct what's behind them.

Often times, when I add padding or margins to a span, it ends up breaking the grid design. This is currently the best solution I have come up with.

Thank you for your help!

htmlcssgridoutline

Answer №1

.a,
.b {
  padding:10px;display:inline-block;
  box-sizing: border-box;float:left
}
.imgs a:nth-child(odd):after{clear:both;display:block;content:''}
.a {
  width:30%
}
.b {
  width:70%}
.a img,
.b img {
  width:100%;box-shadow: 0px 2px 1px black;
}
<span class="imgs">

           <a href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/1.jpg" class="a">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/1.jpg"></a>

           <a class="b" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/1.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/1.jpg"></a>

           <a class="b" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/2.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/2.jpg"></a>

           <a class="a" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/2.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/2.jpg"></a>

           <a class="a" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/3.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/3.jpg"></a>

           <a class="b" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/3.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/3.jpg"></a>

           <a class="b" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/4.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/4.jpg"></a>

           <a class="a" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/4.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/4.jpg"></a>

           <a class="a" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/5.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/5.jpg"></a>

           <a class="b" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/5.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/5.jpg"></a>

           <a class="b" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/6.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/6.jpg"></a>

           <a class="a" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/6.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/6.jpg"></a>

           <a class="a" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/7.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/7.jpg"></a>

           <a class="b" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/7.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/7.jpg"></a>

           <a class="b" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/8.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/b/8.jpg"></a>

           <a class="a" href="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/8.jpg">
<img src="https://raw.githubusercontent.com/davidafroivey/david-paint/master/a/8.jpg"></a>

</span>

You have the option to utilize 

padding:1px;box-sizing:border-box
instead of outline

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

What is the best way to implement backup style attributes for a React JS component?

Is there a method to implement fallback style properties for a component? For example: var inlineStyle = { display: '-webkit-box', display: '-webkit-flex', display: '-moz-box', display: '-moz-flex', ...

javascriptcssreactjs

Creating a Map Using HTML and JavaScript

My current project involves creating a simple map that can be moved with mouse drag functionality, featuring images such as islands. I have successfully retrieved the mouse position by declaring variables posX and e.clientX, as well as for e.clientY. Howe ...

javascripthtmlcss

Save React code as a single HTML file

My current project involves creating one-page websites for a specific service that only accepts single inline HTML files. To make these webpages as modular as possible, I am utilizing React to create ready components. The challenge is exporting the final R ...

javascripthtmlreactjswebpacknext.js

html Comparison of Documents

My goal is to compare HTML documents to see if they have the same tags in the same arrangement, regardless of different inner text and attribute values. I am only interested in comparing the general tag structure, such as: <html> <head> </h ...

c#htmlhtml-parsingdom

How can I modify the background color of the datePicker?

I have a couple of inquiries about customizing the DatePicker: Is there a way to modify the background color of the datePicker using CSS? For instance, I would like to change the current green color to blue. Link to datepicker image (Just to note, JS ca ...

css

Showcasing Portfolio Work in a User-Friendly Mobile Design

Currently revamping my portfolio website and looking for ways to optimize the display of my personal projects. I have a card-like interface in place that works well on desktop but only shows one project at a time on mobile devices. Seeking solutions to imp ...

javascripthtmlcsssliderportfolio

problems with verifying your domain in Google apps

I'm sorry for reaching out here instead of Google's forums, but I haven't had any luck finding answers there. Currently, I have a domain verified on Google Apps by uploading an HTML file, which is being used for email services. I don' ...

htmlemaildnsgoogle-apps

Creating Dynamic Website Titles with PHP and HTML

I am currently teaching myself web development and using the W3 validator to check my code. I have a document that loads like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Conten ...

phphtmltitlehead

The excessive height of a Bootstrap 5 row is causing the image to overflow beyond the container

I am currently working on setting a maximum height for a banner I am designing in bootstrap5. Here is my code snippet: .banner { background: red; max-height: 50px; } <head> <title>Example</title> <meta charset="utf-8" ...

htmlcssbootstrap-5

"Utilizing CSS exclusively in conjunction with a PHP API for seamless integration

My CSS is working only when inline, and I'm struggling to track down the reason for this issue. As a beginner in web design, I am unsure of what steps to take to troubleshoot the problem. Since I cannot open the console to check for errors, what facto ...

phphtmlcssapi

Personalize or delete the spacing within an ion row

Currently, I am delving into the world of Ionic app development. Although I have grasped the concept of the Grid layout, I find myself hitting a roadblock when it comes to adjusting or removing spaces between rows 2 and 3 in my app interface, as illustrate ...

htmlcssangularionic-frameworkionic2

Padding for the doughnut chart in Chart.js canvas

My current setup includes a canvas featuring a doughnut chart created with chart.js enclosed in a div element that displays like this: The canvas has a red background to enhance visibility. Currently, the chart is centered within the canvas with additiona ...

cssangularchart.js

Can the parent of a <div> be modified with JavaScript?

Is there a way to dynamically change the parent of a div element? Here is an example scenario: <body> <div id="div_a"> <div id="child"></div> </div> <div id="div_b"> </div> </body> I am looking ...

javascripthtmlweb

Animating Jquery to smoothly change opacity until it reaches 100% visibility

The script I have does several things, but the main issue lies in the last line where the opacity of the class doesn't seem to reach 100%.... $('.fa-briefcase').parent().on('click', function () { $("#colorscreen").remove(); ...

javascriptjqueryhtmlcss

Utilize Javascript to extract and showcase JSON data fetched from a RESTful API

I'm attempting to use JavaScript to pull JSON data from a REST API and display it on a webpage. The REST call is functioning correctly in the Firefox console. function gethosts() { var xhttp = new XMLHttpRequest(); xhttp.open("GET", "https://10 ...

javascripthtmljsonajaxrest

What is the best way to achieve a Clamp-To-Border effect on a Texture loaded onto an Image in the THREE.js?

My scene includes a plane with an image loaded onto the texture. I've found that there is no Clamp-To-Border option for textures, only Clamp-To-Edge, Repeat Wrapping, and Mirrored Wrapping. Below is an image displaying the default ClampToEdge effect. ...

javascripthtmlimage-processingthree.jsbase64

The table is overflowing its parent element by exceeding 100% width. How can this issue be resolved using only CSS?

My root div has a width of 100% and I need to ensure that all children do not overlap (overflow:hidden) or exceed the 100% width. While this works well with inner <div>s, using <table>s often causes the table to extend beyond the parent 100% d ...

htmlcsshtml-table

Strange gap between element and border on chrome

I noticed some strange spacing between the div borders and elements when I wrapped a few divs inside a container. This issue is only happening on Chrome and Edge, while Mozilla seems to display it correctly. My code includes the usage of Bootstrap along w ...

htmlcsscross-browserspacingborder-spacing

Is it possible to utilize jQuery for dynamically generating a file along with its content?

Here is the HTML snippet I am working on: <ul> <li> Download <a href="#">file1</a> </li> <li> Download <a href="#">file2</a> </li> <li> Download <a href="#">file3</a> </li> ...

javascriptjqueryajaxhtml

Detecting unutilized space in a collection of divs with varying sizes using JavaScript and CSS

To better understand my issue, I created a StackBlitz demo: https://stackblitz.com/edit/angular-aqmahw?file=src/app/tiles-example.css Screenshot My tiles can have four different widths (25%, 50%, 75%, 100%). The tiles must fit on only two lines, so if a ...

javascriptcssangularalgorithm