CODEWITHSUNDEEP
htmlcss
Wizard
Wizard

Reputation: 22043

Measure the grid width

I'd like to imitate my favorite site and measure it grid arrangement: enter image description here

How to measure its width of each part?

Upvotes: 1

Views: 964

Answers (3)

Hanif
Hanif

Reputation: 3797

I think following illustration will help you:

enter image description here

Upvotes: 1

Grokify
Grokify

Reputation: 16324

There are some useful JS properties and methods you can use via the Developer Console. This is useful if you have a list of elements you want to get dimensions for and want to get them at different browser dimensions.

You could type/paste in the following in the browser console:

console.log("#content width: " + document.getElementById("content").offsetWidth)
console.log("#answers width: " + document.getElementById("answers").offsetWidth)

Which would provide the following results that you could copy and paste out.

#content width: 1600
#answers width: 728

There may be a way to do this with the Chrome debugging protocol as well.

Here are some JS properties and methods that may be of use:

Use HTMLElement.offsetWidth for width as an integer. You can also use HTMLElement.offsetWidth for height.

The HTMLElement.offsetWidth read-only property returns the layout width of an element. Typically, an element's offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width. If the element is hidden (for example, by style.display on the element or one of its ancestors to "none"), then 0 is returned.

Use HTMLElement.getBoundingClientRect() for fractional values:

The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.

Upvotes: 2

ban_javascript
ban_javascript

Reputation: 347

If you are using Google Chrome, you can see the width of every element in pixels, by opening Inspect Element (F12), and hovering over the element.

Upvotes: 3

Related Questions