Google Search

The Google Search Layout is a responsive, grid-based layout inspired by Google's search results page, featuring a header with a search bar, filter tabs, and a two-column content area for search results and an aside, all built with native HTML and CSS.

Header includes a logo, a full-width search input, and user controls (e.g., profile or settings) aligned to the right.
Tabs provide filter options (e.g., All, Images, Videos) in a horizontal, scrollable list below the header.
Search Results occupy the main content area, displayed as a vertical list in the primary column.
Aside contains supplementary content (e.g., related searches or ads) in a narrower right column.
The layout uses a 22-column grid with fixed-width left column and responsive right column for precise alignment on larger screens and adapts to a stacked, single-column layout on smaller screens (below 1280px), hiding the aside for better usability.

Why Use This Layout?

The Google Search Layout is designed for search-driven interfaces, offering a clean, organized structure that prioritizes user input and content discovery. Its responsive grid system ensures flexibility across devices, while the tabbed navigation and dual-column content area balance primary results with contextual information, mimicking the familiar and intuitive design of modern search engines.

 

	
	
	
		□
		
	



	
		
			All
			Images
			Videos
			Short videos
			Shopping
			News
			Forums
			⋮ More
		
	



	
		
			Search result 1
			Search result 2
			Search result 3
		
	
	
		Aside result

HTML
CSS

<div class="google-search-grid google-search-header | h-10">
	<div class="bg-gray-200 w-30 h-10" aria-hidden="true"></div>
	<input class="col-span-[20] w-full rounded-full h-10 px-4 py-2 -ml-2 border border-gray-500/25" name="q" placeholder="Search anything and everything" aria-label="Placeholder search input" />
	<ul class="ml-auto | flex flex-row gap-2 items-center">
		<li>&square;</li>
		<li><span class="block w-10 h-10 rounded-full bg-gray-200"></span></li>
	</ul>
</div>

<div class="google-search-grid google-search-tabs | mt-5 border-b border-gray-200">
	<div class="col-start-2 col-span-[21]">
		<ul class="flex flex-row items-center gap-2 overflow-x-auto *:flex-shrink-0 *:px-2 *:py-1">
			<li class="border-b-2 border-black">All</li>
			<li>Images</li>
			<li>Videos</li>
			<li>Short videos</li>
			<li>Shopping</li>
			<li>News</li>
			<li>Forums</li>
			<li>&vellip; More</li>
		</ul>
	</div>
</div>

<div class="google-search-grid google-search-results | mt-10">
	<div class="col-start-2 col-span-18 ml-2">
		<ul class="flex flex-col gap-5">
			<li>Search result 1</li>
			<li>Search result 2</li>
			<li>Search result 3</li>
		</ul>
	</div>
	<div class="google-search-aside | col-span-3 ml-4">
		Aside result
	</div>
</div>

.google-search-grid {
	display: grid;
	grid-template-columns: 210px repeat(20, 36px) minmax(0, 1fr);
}

@media screen and (max-width: 1280px) {
	.google-search-grid {
		display: block;
	}

	.google-search-header {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		position: relative;
		height: unset;
		align-items: center;
	}

	.google-search-header ul {
		position: absolute;
		top: 0;
		right: 0;
	}

	.google-search-aside {
		display: none;
	}
}